By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,879 Members | 1,809 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,879 IT Pros & Developers. It's quick & easy.

Background Image Fixed Position Question

P: n/a
I'm missing something regarding positioning background images. It's probably
obvious, and I hope someone here will note it for me. I'm trying to do
something like the complex spiral thing, only much simpler. According to the
O'Reilly CSS definitive guide book, it should work, but it isn't. On
http://www.xmission.com/~wake/backgroundtest.html I have a background image
showing through, but not showing up in the header areas. It is my impression
that it should be showing through even there, and then as I'd scroll only the
part that should be underneath those headers would show. (My header tag is: h1,
h3 { background-image: url(wakedryerfaded.jpg); background-repeat: no-repeat;
background-position: center; background-attachment: fixed; }.) Not happening,
obviously. Why?
Feb 10 '07 #1
Share this Question
Share on Google+
7 Replies


P: n/a
Paul Wake wrote:
I'm missing something regarding positioning background images. It's probably
obvious, and I hope someone here will note it for me. I'm trying to do
something like the complex spiral thing, only much simpler. According to the
O'Reilly CSS definitive guide book, it should work, but it isn't. On
http://www.xmission.com/~wake/backgroundtest.html I have a background image
showing through, but not showing up in the header areas. It is my impression
that it should be showing through even there, and then as I'd scroll only the
part that should be underneath those headers would show. (My header tag is: h1,
h3 { background-image: url(wakedryerfaded.jpg); background-repeat: no-repeat;
background-position: center; background-attachment: fixed; }.) Not happening,
obviously. Why?

Validate your css
http://jigsaw.w3.org/css-validator/
Feb 10 '07 #2

P: n/a
>Validate your css

Excellent idea, as it led to an incorrect left bracket. Now I just need to
rework the image itself.
Feb 11 '07 #3

P: n/a
http://www.xmission.com/~wake/backgroundtest.html validates now, but I'm still
confused about one thing. Although the CSS puts the header and body text in
front of the background graphic, it doesn't put the color behind the header in
front of the graphic.
http://meyerweb.com/eric/css/edge/co...al/glassy.html and
http://www.brooks-craig.com/ do. What's up with that?
Feb 11 '07 #4

P: n/a
Paul Wake wrote:
http://www.xmission.com/~wake/backgroundtest.html validates now, but I'm still
confused about one thing. Although the CSS puts the header and body text in
front of the background graphic, it doesn't put the color behind the header in
front of the graphic.
http://meyerweb.com/eric/css/edge/co...al/glassy.html and
http://www.brooks-craig.com/ do. What's up with that?
Well, look at the glassy example you provided. Take away the
glassy-tan.jpg background-image Eric specifies for h2, and the
background-color for that element (#CBB196) also shows, "in front" of
the body's glassy-bg.jpg background-image. In this case, your site is
equivalent to that of Eric Meyer. (Congratulations!)

If you want a different effect on your site, you need to provide a
different background image for your h1 and or h3 elements, like Eric did.

Starting from apparent front to back, we have (over-simplified):
- text of the child element
- bg-image of the child element
- bg-color of the child element
- bg-image of the parent element
- bg-color of the parent element

where the nesting can continue (if we start with a grandchild element)
sort of recursively and, again, where I've way oversimplified the rules.
At each level, what we can see conceals the stuff at the lower levels.

Play with it and see for yourself. HTH.

--
John
Feb 11 '07 #5

P: n/a
Paul Wake wrote:
http://meyerweb.com/eric/css/edge/co...al/glassy.html and
I can't wait till we can do that with css.
http://www.brooks-craig.com/ do. What's up with that?

This one is easy. Use opacity - though it's not supported in all browsers.
Feb 11 '07 #6

P: n/a
OK, thanks! I got http://www.xmission.com/~wake/backgroundtest.html to work in
Firefox, although in IE it's skeewhompus. Probably has something to do with a
banner that displays up top in IE but not in Firefox, although that seems odd: I
thought the fixed background image is supposed to stay centered relative to the
viewport, and so it seems like it shouldn't matter whether the headers are
higher or lower on the screen (relative to where they'd display in another
browser), because the part of the centered image that's behind them should just
show through. I feel awfully dense.
Feb 11 '07 #7

P: n/a
Paul Wake wrote:
>
I
thought the fixed background image is supposed to stay centered relative to the
viewport
It is, and does in a conforming browser. IE6 is non-conforming - big
surprise. I don't know if IE7 is any better.

--
Berg
Feb 11 '07 #8

This discussion thread is closed

Replies have been disabled for this discussion.