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替换你的css：

这也可以根据您的需要仅响应设置：

SELECT CASE WHEN someCritera then dosomething
WHEN someCriteria then doSomething
...
--after your final when/then end with an END

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

苦苦挣扎的响应式背景图像

2 个答案: