homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

How to Center Body Background Image

 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?



 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.


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

FF needs height:100%; on html


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

Or the body.


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

if you play with the top-margin % of this(relative to the height and width it will center) you should get your desired result.


 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