homepage Welcome to WebmasterWorld Guest from 54.146.190.193
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
How to Center Body Background Image
purus

5+ Year Member



 
Msg#: 3147673 posted 6:19 pm on Nov 6, 2006 (gmt 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?

 

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3147673 posted 7:02 pm on Nov 6, 2006 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3147673 posted 7:11 pm on Nov 6, 2006 (gmt 0)

FF needs height:100%; on html

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3147673 posted 7:21 pm on Nov 6, 2006 (gmt 0)

Or the body.

cuce

10+ Year Member



 
Msg#: 3147673 posted 9:38 pm on Nov 6, 2006 (gmt 0)

#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

5+ Year Member



 
Msg#: 3147673 posted 12:16 am on Nov 7, 2006 (gmt 0)

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?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved