Hi folks, I was just wondering what the easiest way to centre a background image is? My image is a portrait of a friend and I want his head to be centered (horizontally) so that when viewed on small monitors it is still in the centre of the screen even tho the sides will be slightly out of view.

 

Thanks

body { background-position: top center; }

 

http://www.w3schools.com/css/pr_background-position.asp

 

Or you could put it in a page wrapper provided that has width: 100%;

I would stick it in a wrapper div and set the css to

#wrapper	{

width:1000px;			 
margin-left: auto;
margin-right: auto;							 
border: none;

}

 

No matter what the size, it will re-adjust

To make that even simpler:

 

#wrapper {
width:900px;
height:auto;
margin:0 auto;
}

I read the first one and it seemed the easiest and it was. Thanks all. Thanks Wickham.

I would use Helen's approach, and in fact is what I normally do.

So the difference between the two approaches is one wraps to the screen size of the viewer and the other doesn't?

So the difference between the two approaches is one wraps to the screen size of the viewer and the other doesn't?

 

The difference is that if you center the background-image in the body, if the image is say 1280px wide it will center without leaving a space each side in most resolutions (only in resolutions above 1280px) while Helen's solution of putting a background image in a centered 1000px wide wrapper div is that it can never be more than 1000px wide which may leave spaces each side in modern screen resolutions.

 

If the background image is the same width as the wrapper you don't need to center the background image, only if it's less wide than the wrapper.

 

Use whichever method suits your page design.