CSS Body Background Image Positioning

[Timmy!!!]

Hi,

I've been wondering this for a while so thougth it was worth posting to see if anyone knew if there was a fix.

My web site has a background image (arrows and circles) that can be seen to the left and right of the page. I have used the following CSS to add it:

body { 
	margin-top: 0; 
	margin-bottom: 0; 
	background: url(../layout/background.jpg) no-repeat top center #ebebeb;
	}

Everything works fine, but when the window is made smaller the jpeg background image stays centred to the window and not to the web page. A little hard to explain to please have a look at what I mean:

www.timsportfolio.co.uk

Is it possible to put a min-width or something on the body so that the background image stays in the correct place in smaller windows?

Thanks for any help

[scaryjim]

Is it possible to put a min-width ... on the body...

Yes.

[malfunction]

On a serious note there are plenty of websites out there that seem to just preserve the size of the side bars and let the middle / main part shrink - you'd have to split the background image in two and define 3 columns / boxes (I think - been a while since I did any web work). Weirdly enough I just dropped my screen res to 1024 x 768 and it scales down fine when the window is maximised (even though the pane is then too small to render everything) but as soon as you shrink the window it goes over to the left again.

[Timmy!!!]

Thanks for the help guys.

scaryjim - unfortunately it doesn't work, all it does is push the main page over to the right if the window is smaller but the background image stays centred no matter what.

malfunction - Yeah the 3 coloum approach could be used here but it would force smaller resolution screens to display those arrows etc and push the main middle bit to the right by quite a bit.

Interesting about the maximised window displaying it correctly, how odd. Sounds like a browser issue then perhaps. Although it does do the same in firefox as well as IE.

[Timmy!!!]

Fixed it! Hooray!

The solution was to add the min-width css attribute to the html, not the body.

html {
	min-width: 1020px;
	}

body { 
	margin-top: 0; 
	margin-bottom: 0; 
	background: url(../layout/background.jpg) no-repeat top center #ebebeb;
	}

With this the background stays in the correct position even when the resolution is far smaller than the site itself.

For some reason both IE and Firefox are not reloading the new CSS file I've uploaded so the background still moves (even with a ctrl-f5).

Cheers for all the help.

[yamangman]

CSS 'min-width' is not ie6 compat.

[Timmy!!!]

The internet is not ie6 compat...

For a big website like hexus I guess they have to worry about ie6. I have coded for Firefox/Safari/IE8/IE7. IE6 can take a hike.

Thanks for the information though