Pełny ekran tła z okładką, ale skupić się na części obrazu

Question

Chcę, aby element div miał obraz tła obejmujący cały element div, ale gdy rozmiar okna przeglądarki nie zmieni się zbytnio, ale skupi się na punkcie na Obraz.

Dobrym przykładem będzie this, ale zamiast tego, gdy zmniejszysz rozmiar okna, będzie on koncentrował się na żółtym znaku zamiast na środku obrazu.

Czy istnieje wtyczka lub samouczek dla tego typu rzeczy? Jestem pewien, że z ikonkami jquery i css obrazu mogę wymyślić coś, ale wolałbym użyć sprawdzonej wtyczki lub techniki zamiast hackowania czegoś razem.

Answer 1

Więc myślę, że to było daleko od tak trudne, jak sobie wyobrażałem, ale zachowanie Chciałem można osiągnąć po prostu w ten sposób:

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

Answer 2

Można dodać background-position i innych edycji ..

ten sposób powinien dostosować ..

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

Oferując pozycyjną wsparcia

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

Trzeba będzie wziąć pod uwagę wielkość tła chociaż jak będziesz przycinał.

Jeśli uważasz, że nie należy ograniczać rozmiaru BG do rozmiaru dokumentu, możesz go ustawić (pod warunkiem, że obraz jest większy niż ekran użytkownika), a następnie przepełnienie: ukryty, aby usunąć paski przewijania, ale nadal nie jest najbardziej elegancki droga.