Background image with focal point - css

Question

I have a map image which I would like to use as the background for my website. I would like it to cover the whole background (no white space, no scroll bars - most of the time, more on that later). However, there is a section of the map which I would like to never be cropped as I plan to overlay it with other information.
I have tried the following css:
html {
background: url('../images/doreyfarmfullbackgroundempty2.png') no-repeat 90% 60% local;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100%;
}
Can be seen in this fiddle. The section I'd like to keep is the large yellowish section to the right of the image.
This works quite well for keeping the section of my background image in the frame most of the time but it still gets cut out when the window is resized to very short or very wide. In this situation I would like scroll bars to be introduced so that the whole 'focal point' can still be seen.
I know this is pretty niche but I was wondering if anyone can see a neat way of doing this?

Answer 1

If you know the size of you background pic, set min-witdh and min-height with that.
html{
background: url('http://s2.postimg.org/kzwt9n34p/doreyfarmfullbackgroundempty2.png') ;
min-width:1000px;
min-height:300px;
}
Updated Fiddle

Answer 2

Place the background image in a container, and give it a minimum width and height, with overflow set to auto. So when the size of the browser forces the container to be smaller than you'd like, scroll bars appear allowing the user to pan the map.
<div class="map"></div>
and your CSS:
div.map {
background: url('http://s2.postimg.org/kzwt9n34p/doreyfarmfullbackgroundempty2.png') no-repeat 90% 60% local;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100%;
overflow: auto; <-- this will enable scrollbars on overflow
min-height: 400px; <-- adjust this to taste
min-width: 400px; <-- and this
}
body {
margin: 0;
padding: 0;
}
Update to your fiddle here:
http://jsfiddle.net/xkcsu5st/2/
You could always augment this with a bit of script to control the scroll position of the map, so that the portion you want visible is always in view.

Answer 3

Here's a jQuery library that does it with images instead of background-images:
https://github.com/jonom/jquery-focuspoint
It might not be the best answer in time but it seems to be for now. I'll post another answer if I have one for I think there might be a better way which I'm researching at the moment :)!