I have made a banner for my website which is 2000px across. I want to use it for all except a phone website size page.

The design should work (design wise) - it will look ok if its a 1900px screen, 1200px screen and 800 px screen.

What I want to do is effectively crop the image to the size of the browser width. This is because if its a 1400 px screen then I don't want people to be able to scroll horizontally where there is no content.

Now the banner image will follow the width of his parent element, the #bannerWrapper, while the #bannerWrapper is following the screen width (as div/block element: automatically).And if you don't give a height value for the image, the height of the banner image will follow the width: proportionally in respect to the computed value of the img-width.So there is also no need to give the #bannerWrapper a height: the wrapper will adapt himself automatically.

*) Note: this can only be done (cross-browser) with a foreground image (in the html), not with a background-image.If you use the banner as background-image, it could be done with the css3 property "[[U]background-size[/U]", but then you loose support for IE before IE9 (see: [URL="http://caniuse.com/#search=background-size"][U]caniuse.com/#search=background-size[/U]](http://www.css3.info/preview/background-size/))

... or something like that. Then only one of the images will be loaded: for the mobiles the big size banner can stay in the cloud.

In the same way you could serve different sized images for screen widths of 800px, 1024px, 1280px, and 1900+px.As the image size is growing quadratically (image of 2x width = 4x more pixels, while also the height is 2x more), this can save download time for the intermediate screen sizes: