b11 b11 - 3 months ago 9
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

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

Comments