Aligning Hintergrund-Bild (: relative)

Question

Ich habe Website nach rechts, wo ein Header ist background-image die mit der folgenden CSS gestylt:

.header { 
    position: relative; 
    min-height: 436px; 
    background: url("../img/holland-canal.jpg") no-repeat; 
    background-size: cover; 
} 

So wie es jetzt ist, wenn das Fenster auf niedrigeren Auflösungen Ändern der Größe, Das Bild wird nach links ausgerichtet und der rechte Teil des Bildes wird abgeschnitten. Die rechte Seite des Bildes enthält die Brücke, die ich jederzeit sehen möchte.

Ist es möglich, die background-image so zu positionieren, dass sie immer nach rechts ausgerichtet ist, d. H. Dass der linke Teil des Bildes abgeschnitten wird, wenn die Größe auf ein kleineres Fenster geändert wird?

Answer 1

diese zu Ihrem CSS hinzufügen:

.header{ 
    background-position:right; 
} 

als div, dass die header Klasse wird mit dem Hintergrundbild

Ausgabe

Fore weitere Informationen, überprüfen this

Answer 2

hinzufügen background-position

.header { 
    position: relative; 
    min-height: 436px; 
    background: url("../img/holland-canal.jpg") no-repeat; 
    background-size: cover; 
    background-position: right; 
}