CSS - vertically aligning body background images

2008-03-25

How can I vertically align a background image for the page body so that it will always appear in the middle and have equal space above and below the image? I tried using centre and 50% but it just moves the image to the top and then hides 50 half of it out of sight.

FredVaux.com | LightFused.net

Nutrox · 2008-03-25 #2

Set the HTML height to 100% and add the background image to that.

Code:

html
{
    height:100%;
    background:#FFFFFF url( myimage.jpg ) no-repeat fixed center center;
}

That has always worked for me.

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:


	Ultrashock Forums > Development > Client Side • CSS - vertically aligning body background images	Member Blogs

	Nutrox 1 Blog Entries 13 Creative Assets	2008-03-25 #2
	Set the HTML height to 100% and add the background image to that. Code: html { height:100%; background:#FFFFFF url( myimage.jpg ) no-repeat fixed center center; } That has always worked for me.