homepage Welcome to WebmasterWorld Guest from 54.204.128.190
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




msg:3147675
 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




msg:3147735
 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




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

FF needs height:100%; on html

Fotiman




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

Or the body.

cuce




msg:3147919
 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




msg:3148106
 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