The site i'm editing is www.bedriftsdesign.no.
I've got a shadow image element (shadow.png) wrapped arround the body.
#wrapper {
background: url('shadow.png') no-repeat;
width: 1282px;
margin: auto;
I'd like to make the shadow stay fixed while the content scrolls through it inside so it looks like it scrolls over a bump. I tried to add position: fixed like this
#wrapper {
background: url('shadow.png') no-repeat;
width: 1282px;
margin: auto;
position: fixed;
But this only made the whole page stick and let nothing scroll. I just can't understand how I should progress to make this work.
Any help to fix that problem would be really appreciated?
You could set the body bg img like so and let the rest of the site scroll:
body {
background: url('shadow.png') no-repeat;
background-attachment: fixed;
}
I've done this to this site (if is that you want): www.kapantzakis-snails.gr
Related
I'm trying to create a page similar to this one http://www.seattlewebdesign.com/.
As you scroll down, the image stays fixed, however when I try to set the background as 'background-attachment: fixed' within a div tag, the background image stays fixed to the browser window and continues to remain fixed after scrolling past the div.
Any ideas on how to achieve what I'm trying to do? Any help would be very appreciated.
Encapsulate it in a div
Fiddle
html {
height: 2000px;
}
#test {
background-image: url("http://www.cssnewbie.com/wp-content/uploads/2008/12/random-art.gif");
width: 100%;
height: 200px;
border: 2px solid red;
background-attachment: fixed;
}
<div id="test"></div>
I wanted my background image to stay at the same position. So I made use of
background-attachment:fixed;
When I discovered that iOS does apparently not support this property, I decided to put a fixed background div into the DOM. This actually works pretty well:
#background {
top:0;
left:0;
width:100%;
height:100%;
position:fixed;
background-position:50% 0%;
background-repeat:no-repeat;
background-attachment:fixed;
background-image:url("images/mark-bg.png");
}
At the first look, this works great in iOS too. But then I recognized, that Safari scrolls the DIV up, to where it would have got scrolled, if it wouldn't be fixed.
Now I ask myself »What the hell...?!« I mean... Why does iOS scroll an element that is explicitly told to not do so?
Is there any intelligent solution?
Here is a complete Demo
EDIT
I just found out, that not the element moves itself, but the background image moves...
I found a quite suboptimal solution, but at least it works. I don't use background-image in CSS anymore but put a img tag inside the background div and position it absolute:
#background img {
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
}
Here is the fiddle
Unfortunately, the paragraph "this is text" is not vidible anymore. Lucky, thats it's just for background...
Also the image is not centered anymore, nor resized correctly :[
Edit
I added the following CSS to fix the positioning:
#background img {
margin-left:auto;
margin-right:auto;
}
Julian's answer was very helpful to me.
It solved part of the problem, which was to prevent scrolling of the background image by replacing it with a static image in a fixed position div, avoiding Safari's faulty interpretation of "background-attachment: fixed".
But it left me with an image that I couldn't center within the viewport such that the center of the image was always on the center of the viewport.
This is normally background-position: 50% 50% and background-size: cover, but not when we don't have a background-image at all.
So I replaced Julian's inner <img> with a <div> having similar settings.
Then I added the background-image and properties to that div, EXCEPT FOR background-attachment which I left out.
This resulted in a div which took up the entire viewport and was fixed to the viewport, and which had a child div filling it completely, and that child div had a static background image set at position 50%/50% and size cover.
Works great!
My inner div styles are as follows:
#div_background > div
{
top: 0px;
left: 0px;
width: auto;
height: auto;
right: 0px;
bottom: 0px;
position: absolute;
margin-left: auto;
margin-right: auto;
display: inline-block;
background-image: url(/images/background.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
With the parent div styles as follows:
#div_background
{
display: inline-block;
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
right: 0%;
bottom: 0%;
z-index: -1;
background-color: #A0B4C8;
}
And the HTML is simply:
<div id="div_background"><div></div></div>
I consider this a hacky solution, but a necessary one due to Safari's bug.
A simple way of thinking of it is that rather than using background-attachment of fixed, we're creating our own fixed background and manually attaching a new div with the background image to that.
Thanks, Julian!
I have very simple html page with looong (~8000px width) horizontal panorama image.
The image is set in css as a background background-image:url('long_jpg.jpg');.
I need just to have a scrollbar at the bottom of the page to be able just to scroll the whole background image.
How can do that with css? Can you please give any working example?
check this working example http://jsfiddle.net/a9QvT/1/
.panorama
{
width: 1280px;
height: 1024px;
background-image: url(http://www.designmyprofile.com/images/graphics/backgrounds/background0188.jpg);
}
One way is to set the body width to the same width as the image
body {
width:8000px;
}
If you have any other content, you want to encapsulate all that in a div, so that the content doesn't shatter across 8000px as well.
Is there any reason you can't do this?
HTML:
<body>
<img src="picture.jpg" class="bgpic" />
</body>
CSS:
body
{
margin: 0;
padding: 0;
width: 8000px;
height: 100%;
}
.bgpic
{
width: 100%;
height: 100%;
}
Just like this...
body {
margin: 0px; padding: 0px;
background-image: url('long_jpg.jpg');
min-width: 8000px;
height: 100%;
}
but a quick warning, in terms of design and layout, people are used to pages which scroll up and down, asking them to scroll side to side will seem pretty annoting to most people. Unless you use some anchor tags and they can just click their way to specific points on the page without having the drag the scroll bar.
I have what is probably a simple question but I can't find the answer for it. I have a background image that looks fine and tiles fine and scrolls fine. However, I have a second background image that is layered on top of it that is put inside a wrapper div ("whiteBackground" I believe it's called) and I do not want that one to scroll with the page. As the content and text gets longer and forces the user to scroll I'd like for the second background to stay static. That way while the user scrolls down the page it would just make it seem AS IF the second background was just perfectly still.
I've tried to do a fixed background attachment in my "wrapper" div but it's a no go.
Any ideas?
http://jsfiddle.net/SMc9R/
`#wrapper {
position: relative;
width:960px;
min-height:768px;
margin: 0 auto;
background-image:url('images/white_background.png');
background-attachment: fixed;
font-family:'MuroRegular';
}`
This is the main part I believe the problem is at.
There are no images but I figured that my markup and CSS should be enough. Any help would be appreciated. Thank you so much!
Demo :http://jsfiddle.net/SMc9R/1/ DO YOU want like this.. or specify any correction regarding this correction...
#banner {
position: absolute;
float:left;
width: 960px;
height:60px;
text-align: center;
font-family:'AmaticBold';
font-size: 50px;
background-image:url('images/banner.png');
background-repeat: no-repeat;
z-index: 4;
}
Okay, I've been trying to solve this question for years. I've tried a number of different solutions, but finding myself facing the same problem again, I'd really like to ask the community for the best way to solve this problem.
I want to have two images on the background of my page: 1 as an xy-tiled "texture", and another image which will hug the very bottom right of the entire page, regardless of the page height. So, the page will look like this:
This was accomplished not through a background img() in my CSS, but with an image near the footer, like so:
<style>
.specialImage{
position: absolute;
bottom:0;
right:0;
z-index:-99; /* or higher/lower depending on other elements */
}
</style>
<img src="/static/assets/img/stain.png" class="specialImage" />
The problem with this is that if the page is longer than the screen, this happens:
No good. Changing position to 'fixed' cause it to have a 'sticky' effect, which I don't want. So this avenue is a no-go.
Route 2: the CSS background solution. Unfortunately, this code doesn't work:
body {
color: #333333;
background:
url("/static/assets/img/fabric_1.png"),
url("/static/assets/img/stain.png");
background-repeat: repeat,
no-repeat;
background-position: 0 0,
right bottom;
}
So, I tried this:
html{
background:
url("/static/assets/img/fabric_1.png");
background-repeat: repeat;
background-position: 0 0;
}
body {
background:
url("/static/assets/img/stain.png");
background-repeat:
no-repeat;
background-position:
right bottom;
}
Which, for the long page, works! Hooray! But, when I go back to the short page, now it looks like this:
Sonofabitch!
So what's the solution here? Sticky footers? Min-heights? Wrappers? None of the solutions I've tried so far produce the desired behaviour in both situations.
StackOverflow elders, what should I do?
Thanks!,
R
As I understand you want to stick background image to bottom and right?
so solution is:
body { background: url("/static/assets/img/stain.png") right bottom no-repeat; }
Hmm, with css3 you can use multiple backgrounds. Can you try this?
html{
background: url("/static/assets/img/fabric_1.png"), url("/static/assets/img/stain.png");
background-repeat: repeat, no-repeat;
background-position: 0 0, right bottom;
}
body {
color: #333333;
}
Running into the same issue, my solution involves setting the html element to have a min-height of 100% with a height of auto:
body, html {
width:100%;
height:auto;
min-height:100%;
margin: 0px;
padding: 0px;
}
body {
background-image: url(../images/bkgrnd-footer.jpg);
background-repeat: no-repeat;
background-position: bottom left;
}
Shorter pages are forced to the viewing window height and longer pages picks up the auto height.
You could always set the height of body to 100% then it should work.
To clarify: Then you can have a background image in the html element and in the body element, pretty much as you've allready tried:
html {
height: 100%;
background: url(html.png) bottom right no-repeat;
padding: 0;
margin: 0;
}
body {
padding: 0;
margin: 0;
height: 100%;
background: url(body.png) bottom right no-repeat;
}
Just tested a bit more, and it seems it doesn't work in IE10's Internet Explorer 5 quirks mode, but i really hope that isn't a dealbreaker for youl, because you don't seem to be working with a strange legacy product.
The purple square is the html-background-image and the reddish is the body-background-image.
Thank you for posting. I was having the same problem. I resolved it by adding the background image to a container div for my content set at 100% width. The container closes before my footer, but you could probably try putting it outside the footer also if you need your image to go to the bottom of the page. I only wanted mine to go to the bottom right of my content.
Here's my div structure:
<html> Background image
<body> Padding
<div id="outerWrapper"> Background applied outside content
<div id="borderWrapper"> Contains content
<div id="contentWrap"> Sets up container positioning for child elements