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

background-image, css, javascript

Solution

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;
}

Problem

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.

Original source