Calling NF: CSS Image Clipping

[Sockpuppet]

Have the following code:

<div style="text-align: center; width: 100%; height: 300px; margin: 0px; padding: 0px; background:url(<web_root>/images/banners/banner1.jpg);">
</div>

Which is an image 1280px wide. The site is set up so that it has a max / min number of pixels. 1280 is the max, 800 is the min. When the window is compressed the image is cropped on the right side off as the window collapses - so no scroll bar.

Is there a way in CSS to do this but have the image crop from both sides not just the right side so the image is effectively always centered no matter what the window size.

[DimPrawn]

Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

[Sockpuppet]

Many thanks DP though when it "loaded" all I saw was some hair and part of the kittens ear and though you'd send me to a picture of some dudes junk!

[PAH]

Compute the left position so that it is negative when the image is wider than the window.

[NickFitz]

If I understand you correctly, changing

background:url(<web_root>/images/banners/banner1.jpg);

to

background:url(<web_root>/images/banners/banner1.jpg) top center no-repeat;

ought to do what you want

Here's the relevant bit of the CSS 2.1 spec

[Sockpuppet]

Thanks nick worked a treat.