Welcome to WebmasterWorld Guest from 54.167.159.180

Forum Moderators: not2easy

Message Too Old, No Replies

How to Center Body Background Image

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

New User

10+ Year Member

joined:May 2, 2006
posts:5
votes: 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)

Senior Member from US 

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

joined:Oct 17, 2005
posts:4993
votes: 14


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 30, 2004
posts: 712
votes: 0


FF needs height:100%; on html
7:21 pm on Nov 6, 2006 (gmt 0)

Senior Member from US 

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

joined:Oct 17, 2005
posts:4993
votes: 14


Or the body.
9:38 pm on Nov 6, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 9, 2004
posts:160
votes: 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.
12:16 am on Nov 7, 2006 (gmt 0)

New User

10+ Year Member

joined:May 2, 2006
posts: 5
votes: 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?
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members