如何设置全宽和响应的背景图像

时间:2018-05-06 14:08:52

标签: css responsive

我试图设置一个背景图片并将其设置为完整但我只能看到它居中。

.wrapper-hero {
  width: 100%;
  height: auto;
  max-width: 1920px;
}

.wrapper-hero .hero-image {
  background: url('@{baseDir}images/hero-image.png') no-repeat top center;
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  background-size: cover;
  height: 800px;
  width: 1200px;
}
<div class="wrapper-hero">
  <div class="hero-image"></div>
</div>

有什么想法吗?图像根本没有响应......

1 个答案:

答案 0 :(得分:3)

您多次使用background-size。试试这段代码。

&#13;
&#13;
.hero-image {
      background: url('@{baseDir}images/hero-image.png') no-repeat center center fixed;
      width: 100%;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
&#13;
&#13;
&#13;