CSS background-image scaled between #header and #footer

Question

I am trying to have a background-image 1080p but I want it to start under the header and finished at the bottom of the page before the footer.

what would be the best way doing that in CSS?

thanks in advance for any help

Answer 1

Here's how you could do it using background-cover

body, html {
  height: 100%;
  }

.cover{
          
    height: 700px;
 
    background: url(http://lorempixel.com/1080/780/) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    
}

<div class="header">
 <h1> Header Content</h1>
</div>
    
<div class="cover">
 
</div>
<footer>
    <h2>Footer content</h2>
</footer>

.
Click "run snippet" then "full screen" to run this code.

if you want the image, header and footer and to fit inside the browsers view use this height property add this:

// make body and html take up full height of browser viewport
body, html {
   height: 100%;
}

// make the image div take up about 80% of html and body height - to leave room for header and footer
.cover {
  height:80%;
}

body, html {
  height: 100%;
  }

.cover{
          
    height: 80%;
 
    
    background: url(http://lorempixel.com/1080/780/) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    
}

<div class="header">
 <h1> Header Content</h1>
</div>
    
<div class="cover">
 
</div>
<footer>
    <h2>Footer content</h2>
</footer>