Vollbild-Hintergrund mit Abdeckung, aber Fokus auf einen Teil des Bildes

Question

Ich möchte ein Div ein Hintergrundbild haben, das das gesamte div abdeckt, aber wenn das Browserfenster Größe ändert sich nicht zu weit nach unten, sondern konzentrieren sich auf einen Punkt auf das Bild.

Ein gutes Beispiel wäre this, aber stattdessen, wenn Sie Ihre Fenstergröße kleiner machen, würde es sich auf das gelbe Zeichen anstelle der Mitte des Bildes konzentrieren.

Gibt es ein Plugin oder Tutorial für diese Art von Sache? Ich bin mir sicher, dass ich mit jquery und css image sprites etwas ausdenken kann, aber ich würde lieber ein bewährtes Plugin oder eine bewährte Technik verwenden, anstatt etwas zusammen zu hacken.

Answer 1

Nun, ich denke, das war bei weitem nicht so schwierig, wie ich es mir vorgestellt hatte, aber das Verhalten kann ich wollte einfach, indem Sie diese erreicht werden:

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

Answer 2

Sie könnten Hintergrund-Position und andere Bearbeitungs ..

Auf diese Weise anpassen sollte hinzufügen ..

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

Positions Unterstützung bietet

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

Sie müssen die Hintergrundgröße berücksichtigen obwohl wie du zuschneiden wirst.

Wenn Sie die BG-Größe nicht auf die Dokumentgröße beschränken möchten, können Sie sie positionieren (vorausgesetzt, das Bild war größer als der Benutzerbildschirm) und dann überlaufen: ausgeblendet, um diese Bildlaufleisten zu entfernen, aber immer noch nicht die eleganteste Weg.