CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user6758349
user6758349

Reputation:

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.

Upvotes: 0

Views: 1116

Answers (2)

Mr Lister
Mr Lister

Reputation: 46589

By default, background does cover the padding, yes.

So one possible solution would be to use background-origin to tell the browser the background should start in the upper left of the content, rather than the padding area.

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

This one would have the advantage of being dynamic; i.e. you wouldn't need to change its value if changed the value of the padding.

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115293

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

Upvotes: 2

Related Questions