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

Question

我正在尝试使用 1080p 背景图像，但我希望它从页眉下方开始，并在页脚之前的页面底部结束。

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

提前感谢您的帮助

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

.
单击 "run snippet" 然后 "full screen" 到运行此代码。

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

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

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

CSS background-image scaled between #header and #footer

css

header

footer

background-image