b11 b11 - 1 year ago 61
CSS Question

Body padding not applied to background image

I am doing a padding for my body tag like this because I am using a nav bar fixed top. I want the nav bar to always stay on top.

body {
padding-top: 70px;
}


Now I want to add a background image to the body and want it to cover the entire screen. So I do this.

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


But the problem is that the nav bar covers parts of the image, the 70px padding is not working on the background image. Please help fix this.

Answer Source

Position the background 70px down using the offsets available 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;
}