As I learn more about about CSS, I will gladly contribute to the forum and give tips and advice whenever I can. BUT for the moment I'm full of simple questions...
I'm not sure why this page won't load correctly in Firefox.
The image of the book should be centered on the page....NOT cut off and at the top center position.
Any ideas of how to rewrite the CSS or is it something else that I'm not writing out properly?
Danke!
Jeff
Full Version: background image problem in Firefox
Add this to your style sheet and you will see why.
BODY isn't higher than its content. Gecko's behavior regarding backgrounds has changed from version to version. At one point the color (or bg-image) of body was allowed to paint the whole screen even if body was shorter. Then for a period it helped to put the background on HTML instead. Now I think the only way is to make body expand to the window's full height.
I wonder if this vertically centered background really is what you want though. Look at the page and resize the window up and down. On a large screen the book could be placed pretty far from the heading and there would be a lot of space in-between. A matter of taste, but I think it would look nicer if you positioned it a fixed distance from the top instead.
P.S. Don't forget to add a background color. The background is gray in my browser.
CODE
body { border: 5px dashed red }
BODY isn't higher than its content. Gecko's behavior regarding backgrounds has changed from version to version. At one point the color (or bg-image) of body was allowed to paint the whole screen even if body was shorter. Then for a period it helped to put the background on HTML instead. Now I think the only way is to make body expand to the window's full height.
CODE
html,body { height: 100% }
I wonder if this vertically centered background really is what you want though. Look at the page and resize the window up and down. On a large screen the book could be placed pretty far from the heading and there would be a lot of space in-between. A matter of taste, but I think it would look nicer if you positioned it a fixed distance from the top instead.
P.S. Don't forget to add a background color. The background is gray in my browser.
QUOTE(pandy @ Dec 17 2006, 02:37 PM) 
Gecko's behavior regarding backgrounds has changed from version to version.
Let me add that "Gecko" is the rendering engine in Mozilla, Firefox, Netscape6+ and a few other obscure browsers.
QUOTE
At one point the color (or bg-image) of body was allowed to paint the whole screen even if body was shorter.
Isn't it supposed to? http://www.w3.org/TR/CSS21/colors.html#q2 says
"For HTML documents whose root HTML element has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of those properties from that HTML element's first BODY element child when painting backgrounds for the canvas, and must not paint a background for that BODY element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element."
QUOTE
Then for a period it helped to put the background on HTML instead. Now I think the only way is to make body expand to the window's full height.
Note that this only applies to positioned, non-tiling BG images. A tiling BG image should cover the whole viewport even in FF.
Yes, you are right. I must confuse this with something else. Forget what I said above.
I wonder what I confuse it with though. Now I have to brood over THAT. Any ideas?.
I wonder what I confuse it with though. Now I have to brood over THAT. Any ideas?.
Could it have something to do with those murky definitions of "root element" and "canvas" in the spec? I.e., is the <html> root element supposed to cover the whole viewport by default?
Or maybe it has something to do with if you style both the <html> and <body> element?
Or maybe it has something to do with if you style both the <html> and <body> element?
You see? The black color solves all the problems! 
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.