I am trying to center the background image both horizontally and vertically in the body tag and it works great in Safari, but not Firefox (I haven't tested IE yet). When you specify background-position: center center; (or even 50% 50% for that matter) Safari centers the image both horizontally and vertically in the browser window, and keeps it centered even as the window is resized. Firefox however only centers it horizontally. The vertical alignment in Firefox appears to align the center of the image with the top of the browser window, not with the center of the browser window.
How do I go about centering the background image on the body tag both horizontally and vertically in all browsers?
"Hi Mr. Mechanic, my car
"Hi Mr. Mechanic, my car doesn't work. Why not?"
We need to see the code
Lol, sorry. It's really just
Lol, sorry. It's really just a general question though:
background: black url(../images/bg.jpg) no-repeat;
background-position: center center;
I tried it out with height: 100%; margin: 0; padding: 0; but it didn't seem to make any difference.
Never mind, I just needed to
Never mind, I just needed to set the html height to 100% as well as the body. Why isn't that set by default in Firefox?
You shouldn't need to, and I've never experienced this problem in Firefox - we really need to see the entire HTML as well, to check everything's working as it should be.
I ran into the same problem. The the background in Firefox wont center like in other browsers. I took the above advice and added a height:100% style for html tag and it worked. The *only* other way I found it work is when I removed the DOCTYPE headers.
Here are the test pages I tried, let me know if you know of another work around. (and below is the code that *I think* you were asking to be posted):
http://muserna.org/test/test-HTML-401strict.html HTML 4.01 strict -- Forefox NO GOOD
http://muserna.org/test/test-HTML-401transitional.html HTML 4.01 transitional -- Forefox NO GOOD
http://muserna.org/test/test-XHTML-10transitional.html XHMTL 1.0 -- Firefox NO GOOD
http://muserna.org/test/test-HTML-NO-DOC-TYPE.html HTML no DOCTYPE -- Forefox OK!
http://muserna.org/test/test-XHTML-10transitional-wheight.html XHTML 1.0 transitional with HEIGHT added - OK!
XHMTL 1.0 Transitional
I can't quite explain how or
I can't quite explain how or why it needs to be set, but the HTML element needs to have 100% height set, so the body has something to relate to.
Although it only seems to affect background images, not background color.