Calling NF: CSS Image Clipping

[Sockpuppet]

Thanks nick worked a treat.

[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

[PAH]

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

[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!

[DimPrawn]

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

[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.