Question

场景：

我有一个Wordpress网站，该网站的主题很旧，不允许我更改标题图像。
作为要解决此问题的页面上的替代方法，我有使用CSS隐藏标题图片并将其替换为背景图像，效果很好并且响应迅速。

Todo：

但是我需要为该区域设置一个高度，以便为 bg图片显示一个完整尺寸的空间（我已经使用“顶部填充”完成了此操作）
- 每当在背景图像下方导致大空间调整窗口大小或在手机上。
有没有办法使图像下方的空间会随着图像的收缩而收缩下来？

URL： http://www.annareynolds.org/lovehobart/

我的自定义CSS：

.singular-page-691 #header img {
    display:none;
}
.singular-page-691 #branding {
padding-top:390px;
  background-image:url(http://www.annareynolds.org/wp-content/uploads/2018/08/love-hobart-crop.jpg);  
  background-repeat: no-repeat;
  background-size: 100%;
background-position:top left;
}

Answer 1

我已经访问了您提供的链接并检查了响应。我认为我按照您提出的问题在正确的地方工作。

您在paddding-top:390px中有.singular-page-691 #branding，这会引起您提到的空格。您可以在响应中调整padding-top的值。我尝试过padding-top:180px，对我来说很好。

Answer 2

仅在％

中使用填充

喜欢：

.singular-page-691 #branding {
padding-top: 40%;}

http://prntscr.com/kj6z3j

自适应背景图片高度

2 个答案: