Background Image Fixed Position Question

[Paul Wake]

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?

[zzpat]

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/

[Paul Wake]

>Validate your css

Excellent idea, as it led to an incorrect left bracket. Now I just need to
rework the image itself.

[Paul Wake]

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?

[John Hosking]

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

[zzpat]

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.

[Paul Wake]

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.

[Bergamot]

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