full screen background with cover, but focus on a part of the image

Question

I want a div to have a background image that covers the entire div but when the browser window size changes not to scale down too much but focus towards a point on the image.

A good example would be this , but instead when you make your window size smaller it would focus on the yellow sign instead of the middle of the image.

Is there a plugin or tutorial for this sort of thing? I'm sure that with jquery and css image sprites I can come up with something but I would rather use a proven plugin or technique instead of hacking something together.

Answer 1

Well I guess this was far from as difficult as I had imagined, but the behaviour I wanted can be achieved simply by doing this:

{
background: url('http://farm8.staticflickr.com/7218/7289572558_44c110c510_h.jpg') no-repeat 95% 50%;
min-height: 100%;
background-size: cover;
}

Answer 2

You could add background-position and other editing..

This way should adjust ..

background: url('IMG.PNG') no-repeat center center;
min-height: 100%;
background-size: cover;

Offering positional support

background-position-x: -100px;
background-position-y: 100px;

You will need to consider the background size though as you will be cropping.

If you where to consider not limiting the size of your BG to the Document size you could position it (providing the image was greater than the users screen) and then overflow:hidden to remove those scrollbars but still not the most elegant way.