Наложение на тело не применяется к фоновому изображению

Question

Я делаю прокладку для тега моего тела, как это, потому что я использую фиксированную верхнюю панель навигации. Я хочу, чтобы навигационная панель всегда оставалась на вершине.

body { 
    padding-top: 70px; 
} 

Теперь я хочу добавить фоновое изображение в тело и хочу, чтобы он охватывал весь экран. Поэтому я делаю это.

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

Но проблема в том, что бар нав охватывает части изображения, 70px обивка не работает на фоновом изображении. Пожалуйста, помогите исправить это.

Answer 1

Положение фона 70px вниз с помощью коррекций доступны в 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

По умолчанию фон делает покрытие отступы, да.

Таким образом, одним из возможных решений было бы использовать background-origin, чтобы сообщить обозревателю, что фон должен начинаться в левом верхнем углу содержимого, а не в области заполнения.

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; 
 
}

Это один будет иметь преимущество быть динамичным; т. е. вам не нужно будет изменять его значение, если изменить значение отступов.