Welcome to WebmasterWorld Guest from 54.196.175.173

Forum Moderators: not2easy

Message Too Old, No Replies

How to Center Body Background Image

     

purus

6:19 pm on Nov 6, 2006 (gmt 0)

5+ Year Member



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?

Fotiman

7:02 pm on Nov 6, 2006 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



What you really mean is centering the background image in the *viewport*, not the body. The body does not necessarily fill the entire verticaly space in the viewport. You could specify height:100% on the body, and that might work for Firefox.

Span

7:11 pm on Nov 6, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



FF needs height:100%; on html

Fotiman

7:21 pm on Nov 6, 2006 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Or the body.

cuce

9:38 pm on Nov 6, 2006 (gmt 0)

10+ Year Member



#vhcenter{text-align:center;width:100px;height:100px;position:absolute;top:margin-top:-50px;top:50%;margin-left:-50px;left:50%;}
if you play with the top-margin % of this(relative to the height and width it will center) you should get your desired result.

purus

12:16 am on Nov 7, 2006 (gmt 0)

5+ Year Member



I had height: 100% on the body, but it needed it on the html too. What is the reasoning for not setting the html height to 100% of the viewport by default in Firefox?
 

Featured Threads

Hot Threads This Week

Hot Threads This Month