Scaleable background image with a minimum width in css?

[sirichmond]

Evening all,

I have set myself up a test page and its working fine with a scaleable background that goes up to a max width of 1500px. I have noticed though that when viewed on a small screen say a phone the background scales to fit regardless of how much content is on the page. So is their any way of setting the background to have a minimum width?

CSS
#body.main {background: url('images/backgrounds//rotate.php') no-repeat center top #000;
background-size:contain;
min-width:960px;
vertical-align:text-top;
margin:0;
}

http://www.shinehairsalon.net/ATGNI/test.html

Your help is appreciated as usual

 

[sirichmond]

Think I'm getting more confused now. I created a background id CSS as below very simply to see if it would scale plus min and max width but not working.

#background {
width:100%;
max-width: 1400px;
min-width:960px;
}

html
<div id="background"><img src="images/backgrounds/rotate.php"/></div>

Sure I'm missing something simple but this has done my head in to the point where I cant even think now....

Any help appreciated again
Cheers