sfondo a schermo intero con copertina, ma concentrarsi su una parte dell'immagine

Question

Voglio un div per avere un'immagine di sfondo che copra l'intero div ma quando le dimensioni della finestra del browser non cambiano troppo, ma si concentrano su un punto su l'immagine.

Un buon esempio potrebbe essere this, ma invece quando riduci le dimensioni della finestra si concentrerebbe sul segno giallo anziché sul centro dell'immagine.

C'è un plugin o un tutorial per questo genere di cose? Sono sicuro che con gli sprites di immagini jQuery e CSS posso inventare qualcosa, ma preferirei usare un plugin o una tecnica collaudati invece di hackerare qualcosa insieme.

Answer 1

Beh credo che questo era lontano da così difficile come avevo immaginato, ma il comportamento ho voluto può essere ottenuto semplicemente in questo modo:

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

Answer 2

Si potrebbe aggiungere background-position e altri editing ..

In questo modo dovrebbe regolare ..

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

Offrendo supporto posizionale

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

Sarà necessario considerare la dimensione di fondo anche se come crollerai.

Se si considera che non limita la dimensione del proprio BG alle dimensioni del documento, è possibile posizionarlo (fornendo l'immagine era maggiore della schermata degli utenti) e quindi overflow: nascosto per rimuovere quelle barre di scorrimento ma non ancora il più elegante modo.