CSS 背景图像在#header 和#footer 之间缩放答案

【问题标题】：CSS background-image scaled between #header and #footerCSS 背景图像在#header 和#footer 之间缩放
【发布时间】：2015-01-13 06:59:41
【问题描述】：

我想要一个 1080p 的背景图像，但我希望它从页眉下方开始，并在页脚之前的页面底部结束。

在 CSS 中最好的方法是什么？

提前感谢您的帮助

【问题讨论】：

在#header 和#footer 之间创建一个容器（您甚至可以使用main 作为元素）并为其应用背景？ 编辑： 缩放！ OP 也想要它的规模。你看过background-size: cover吗？

标签： css header background-image footer

【解决方案1】：

以下是使用 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>

.
单击“运行 sn-p”，然后单击“全屏”运行此代码。

如果您想要图像、页眉和页脚并适合浏览器视图，请使用此高度属性添加这个：

// 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>

【讨论】：