Is it possible to have a background image that doesn't scroll in a <div> (assuming the <div> uses overflow:auto; to allow for scrolling). I tried doing it myself using background-attachment:fixed; and it didn't work. In Mozilla it placed the background image way to the left and above where the div starts. I didn't test it in IE, as I wanted to get it right in a standards compliant browser first. So I searched Google and came across this line on Eric Meyer's site:
IE6/Win's rendering of this page is not correct, as it (as well as some other browsers) doesn't correctly support background-attachment: fixed for any element other than the body.
So, should I give up on this?
*Edit: I just tested this in IE, it works. The background is in the right spot and it does not scroll when the div scrolls. Since this works in IE and not in Mozilla, I can only have one conclusion: I've done something horribly wrong.Here's a link to the offending page. Compare it's display in IE and Mozilla. The effect is as intended in IE, and horribly wrong in Mozilla.
<!-- m --><a class="postlink" href="http://www.tom-wallace.com/phpinc2.php">http://www.tom-wallace.com/phpinc2.php</a><!-- m -->
The settings used on this background image are:
background-image:url(../images/contentshadow.gif);
background-attachment:fixed;
background-position:0 0;
background-repeat:no-repeat;Why not just use background-repeat: repeat-x;?That would still make the background scroll, though. I don't want it to scroll. Currently I've had to make the background really, really tall for some pages that scroll down a ways. I could divide those long pages up into multiple pages, but I'm lazy. My goal is to make a background that's only about 450px high and have it not scroll with the page.Also, the background has a dropshadow effect along the top and left edge, that's why it won't look right if it repeats. I've uploaded a smaller version of the background image I use here, to give you an idea of what I mean.
<!-- m --><a class="postlink" href="http://www.tom-wallace.com/images/contentbg.gifI">http://www.tom-wallace.com/images/contentbg.gifI</a><!-- m --> use this:
background: url( background.jpg ) no-repeat fixed;
It validates and works in ie as far as I know.Thanks Jish, but that has the same effect as what I was using. It works in IE, but not in Mozilla. In fact, it does the same thing my version did in Mozilla.
I've found out that Mozilla will properly render the fixed aspect of the background, meaning it doesn't scroll when you use background-attachment: fixed;. However, when I use numbers to specify where the background should start (with background-position: #px #px;, it bases those numbers on the <body> of the page, rather than the containing <div>. Since my site is centered, and not left aligned, it will look different on every computer, so this is not a solution.Originally posted by TomDenver
However, when I use numbers to specify where the background should start (with background-position: #px #px;, it bases those numbers on the <body> of the page, rather than the containing <div>.
So... why are you specifying the background's position?I specified it in an attempt to force it to "0px 0px" inside the div. It apparently won't align based on the div though. Any attempt to position it makes it position itself based on where the body is. If I don't specify a position, it does the same thing as specifying 0px 0px. Meaning, it starts at the top left of the page, rather than the top left of the div.
What boggles the mind is that IE gets this right, and Mozilla does not. Which can only mean I've screwed up. I feel dirty.I've found a temporary, and perhaps permanent solution. It's not exactly what I wanted, but it's not terrible either.
I've removed the overflow from the containing div, and moved it to a child div tag that was already there and specified a height of 385px. Now the containing div never scrolls, so I don't have to worry about the background in that div. The child div has it's own background and I want that one to scroll with the page anyway. I've uploaded the file again so you can see what I mean, if anyone cares. Just click the link provided earlier.Thanks a lot for this solution! It's perfect!
Best Regards,
Jan <!-- m --><a class="postlink" href="Jaaphttp://www.w3.org/TR/REC-CSS2/colors.html#propdef-background-attachment">Jaaphttp://www.w3.org/TR/REC-CSS2/color ... attachment</a><!-- m -->
IE6/Win's rendering of this page is not correct, as it (as well as some other browsers) doesn't correctly support background-attachment: fixed for any element other than the body.
So, should I give up on this?
*Edit: I just tested this in IE, it works. The background is in the right spot and it does not scroll when the div scrolls. Since this works in IE and not in Mozilla, I can only have one conclusion: I've done something horribly wrong.Here's a link to the offending page. Compare it's display in IE and Mozilla. The effect is as intended in IE, and horribly wrong in Mozilla.
<!-- m --><a class="postlink" href="http://www.tom-wallace.com/phpinc2.php">http://www.tom-wallace.com/phpinc2.php</a><!-- m -->
The settings used on this background image are:
background-image:url(../images/contentshadow.gif);
background-attachment:fixed;
background-position:0 0;
background-repeat:no-repeat;Why not just use background-repeat: repeat-x;?That would still make the background scroll, though. I don't want it to scroll. Currently I've had to make the background really, really tall for some pages that scroll down a ways. I could divide those long pages up into multiple pages, but I'm lazy. My goal is to make a background that's only about 450px high and have it not scroll with the page.Also, the background has a dropshadow effect along the top and left edge, that's why it won't look right if it repeats. I've uploaded a smaller version of the background image I use here, to give you an idea of what I mean.
<!-- m --><a class="postlink" href="http://www.tom-wallace.com/images/contentbg.gifI">http://www.tom-wallace.com/images/contentbg.gifI</a><!-- m --> use this:
background: url( background.jpg ) no-repeat fixed;
It validates and works in ie as far as I know.Thanks Jish, but that has the same effect as what I was using. It works in IE, but not in Mozilla. In fact, it does the same thing my version did in Mozilla.
I've found out that Mozilla will properly render the fixed aspect of the background, meaning it doesn't scroll when you use background-attachment: fixed;. However, when I use numbers to specify where the background should start (with background-position: #px #px;, it bases those numbers on the <body> of the page, rather than the containing <div>. Since my site is centered, and not left aligned, it will look different on every computer, so this is not a solution.Originally posted by TomDenver
However, when I use numbers to specify where the background should start (with background-position: #px #px;, it bases those numbers on the <body> of the page, rather than the containing <div>.
So... why are you specifying the background's position?I specified it in an attempt to force it to "0px 0px" inside the div. It apparently won't align based on the div though. Any attempt to position it makes it position itself based on where the body is. If I don't specify a position, it does the same thing as specifying 0px 0px. Meaning, it starts at the top left of the page, rather than the top left of the div.
What boggles the mind is that IE gets this right, and Mozilla does not. Which can only mean I've screwed up. I feel dirty.I've found a temporary, and perhaps permanent solution. It's not exactly what I wanted, but it's not terrible either.
I've removed the overflow from the containing div, and moved it to a child div tag that was already there and specified a height of 385px. Now the containing div never scrolls, so I don't have to worry about the background in that div. The child div has it's own background and I want that one to scroll with the page anyway. I've uploaded the file again so you can see what I mean, if anyone cares. Just click the link provided earlier.Thanks a lot for this solution! It's perfect!
Best Regards,
Jan <!-- m --><a class="postlink" href="Jaaphttp://www.w3.org/TR/REC-CSS2/colors.html#propdef-background-attachment">Jaaphttp://www.w3.org/TR/REC-CSS2/color ... attachment</a><!-- m -->