css - Background image with focal point -

i have map image use background website. cover whole background (no white space, no scroll bars - of time, more on later). however, there section of map never cropped plan overlay other information.

i have tried 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 seen in fiddle. section i'd keep large yellowish section right of image.

this works quite keeping section of background image in frame of time still gets cut out when window resized short or wide. in situation scroll bars introduced whole 'focal point' can still seen.

i know pretty niche wondering if can see neat way of doing this?

if know size of background pic, set min-witdh , min-height that.

html{     background: url('http://s2.postimg.org/kzwt9n34p/doreyfarmfullbackgroundempty2.png') ;      min-width:1000px;     min-height:300px; } 

updated fiddle