与响应式背景图像作斗争

Question

我已经阅读了很多关于响应式 CSS 背景图片的帖子，但我无法使我的作品发挥作用。

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

我似乎可以在桌面版或移动版上解决问题，但他们不想一起工作。我已经使用了建议的解决方案（如下），但我没有按比例缩放整个图片 up/down，它只显示了其中的一部分或很多白色 space。我做错了什么！？

.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 替换你的 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%;
}

Answer 2

试试这个 css 并使用媒体查询更改移动设备的边距上限：

.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;
    }
}

与响应式背景图像作斗争

Struggling with responsive Background-Image

html

css

image

background-image