Körperpolsterung nicht auf das Hintergrundbild angewendet

Question

Ich mache ein Padding für mein Body-Tag wie dieses, weil ich ein Nav-Bar-Fix Top verwende. Ich möchte, dass die Navigationsleiste immer oben bleibt.

Jetzt möchte ich ein Hintergrundbild zum Körper hinzufügen und will, dass es den gesamten Bildschirm abdeckt. Also mache ich das.

body { 
    background: url(background.jpg); 
    background-size: cover; 
} 

Aber das Problem ist, dass die Navigationsleiste umfasst Teile des Bildes, das 70px padding funktioniert nicht auf dem Hintergrundbild. Bitte helfen Sie das zu beheben.

Answer 1

Position der Hintergrund 70px nach unten die Offsets verfügbar unter Verwendung von in background-position

Background-Position @ MDN

body { 
 
    background-image: url(http://www.fillmurray.com/g/200/300); 
 
    background-position: top 70px center; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
}

Answer 2

standardmäßig tut Hintergrund die Polsterung decken, ja.

So eine mögliche Lösung wäre, background-origin zu verwenden, um dem Browser zu sagen, dass der Hintergrund in der oberen linken Seite des Inhalts statt des Auffüllbereichs beginnen sollte.

html {background:white; height:100%} 
 
body { 
 
    box-sizing:border-box; min-height:100%; 
 
    padding-top:70px; 
 
    background: url(http://www.fillmurray.com/g/200/300); 
 
    background-origin: content-box; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
}

Das man den Vorteil, dass sie dynamisch haben würde; d. h., Sie müssten den Wert nicht ändern, wenn Sie den Wert der Auffüllung ändern.