与响应式背景图像作斗争

Question

我已经阅读了很多关于响应式 CSS 背景图像的帖子，但我无法让我的工作。

我的网站是http://www.conn3cted.uk.tn/intManagement.html，我正在尝试将图片用作“横幅”，因此高度不能太大。

我似乎能够在台式机或移动设备上解决此问题，但他们不想一起工作。我已经使用了建议的解决方案（如下），但我没有让整个图片按比例放大/缩小，它只显示其中的一部分或大量空白。我做错了什么！？

.whatWeDo {
  padding-top: 100px;
  background-image: url("/images/intManagement/homePage/whatwedo.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 120px;
}

Answer 1

试试这个 css 并使用媒体查询来更改移动设备的 margin-top：

.whatWeDo {
    background-image: url("/images/intManagement/homePage/whatwedo.jpg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: 100vh;
    margin-top: 80px;
}

@media screen and (max-width: 878px) {
  .whatWeDo {
        margin-top: 170px;
    }
}

Answer 2

用替换你的 css 试试这个 css：

这也可以根据您的需要仅设置顶部：

.whatWeDo {
  background-image: url("/images/intManagement/homePage/whatwedo.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  float: left;
  height: 100%;
  padding-top: 100px;
  position: relative;
  top: 80px;
  width: 100%;
}