6 replies [Last post]
purus
Offline
Regular
Last seen: 6 years 21 weeks ago
Joined: 2005-10-17
Posts: 45
Points: 0

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?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 12 weeks 1 day ago
Milton Keynes
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

"Hi Mr. Mechanic, my car

"Hi Mr. Mechanic, my car doesn't work. Why not?"

We need to see the code Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

purus
Offline
Regular
Last seen: 6 years 21 weeks ago
Joined: 2005-10-17
Posts: 45
Points: 0

Lol, sorry. It's really just

Lol, sorry. It's really just a general question though:

body { 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.

purus
Offline
Regular
Last seen: 6 years 21 weeks ago
Joined: 2005-10-17
Posts: 45
Points: 0

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?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 12 weeks 1 day ago
Milton Keynes
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

HTML please

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.

Verschwindende wrote:
  • CSS doesn't make pies

muserna
Offline
newbie
Last seen: 7 years 38 weeks ago
Joined: 2006-12-21
Posts: 2
Points: 0

HTML sample

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!

-muserna

Untitled Document

XHMTL 1.0 Transitional

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 12 weeks 1 day ago
Milton Keynes
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

Verschwindende wrote:
  • CSS doesn't make pies