html - 需要背景图像才能响应

Question

我已经设置了背景图片。我需要它来响应。我已经为此使用了媒体查询，但图像是相同的。我应该使用背景大小或宽度和高度来查看它吗？因为它被剪掉了。我尝试了 background-size:100% 100%，但它看起来被拉伸了。

代码如下：

.header-area {
    position: fixed;
    background: url(images/image.jpg)  no-repeat;
    background-size:100% 100%;
    width: 100%;
    height: 100%;
}

.overlay {
    position: relative;
    z-index: 1;
}

.overlay:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #000000;
    opacity: 0.4;
} 

标签： htmlcssmedia-queries

Answer 1

制作background-size: cover和background-position: center

.header-area { 
     background-image: url("image url");
     height: 100%; 

     /* Center and scale the image nicely */
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
 }