Html 我有2个集装箱背景和前景的图像。如何使前景图像具有响应性

我有两张照片。1我在背景中设置了一个，另一个显示在背景图像上方，是有响应的，但当我将浏览器拖动到较小的位置时，前景图像出错。网站链接如下。

我已附上代码。我已经把前景图像放在了上面。title_container:前面显示的是完美但没有响应

        .title_container:before {
background: url(https://padovasitiweb.it/wp-content/uploads/main-cover_fgg.png) no-repeat center center / cover;
content: '';
top: auto;
position: absolute;
bottom: 7px;
height: 360px;
width: 100%;
left: 0px;
z-index: 5;
text-align: center;
}
.title_container h1.entry-title{
margin-top: 7vw;
margin-bottom: 7vw;
}
@media only screen and (max-width: 767px){
.title_container h1.entry-title, .title_container .entry-title a {
font-size: 8vw !important;
letter-spacing: -1px;
color: #333333!important;
top: 4px;

}
.title_container:before{
    height: 107px!important;    
    bottom: 2px !important;
}

}

---

我希望有人能帮我找到代码中缺少的内容。我已经为移动设备设置了媒体查询，这很好，但不是所有设备都响应。当我拖动浏览器时，前景图像应与背景图像一样缩短。

导致问题的原因是

封面

背景尺寸。

cover

CSS属性更像是一种最合适的样式，不适合其父属性的宽度。您可以使用百分比，例如

背景大小：100%自动

，它将以

100%

缩放到父级的宽度，并以

auto

保留其纵横比

我还将定位从固定单位更改为百分比，以便它保持在正确的位置

我所做的唯一更改是

.container h1中的样式。条目标题：before

CSS属性

.container h1.entry-title:before {
    background: url(https://padovasitiweb.it/wp-content/uploads/main-cover_fgg.png) no-repeat center bottom;
    background-size: 100% auto;
    content: '';
    position: absolute;
    top: auto;
    bottom: 1.5%;
    left: 50.6%;
    transform: translateX(-50%);
    height: 100%;
    width: 100%;
    z-index: 5;
    text-align: center;
    display: block;
}

编辑 我想在我查看HTML时，您对HTML进行了更改。当我查看HTML时，

：before

元素是该元素的直接子元素，其类为

stretch\u full container\u wrap alternate\u color light\u bg\u color title\u container

如果保持HTML现在的状态，还需要执行以下CSS更改：

1） 将

position:static

应用于

:before

元素的父元素，该元素具有类

主标题条目标题

2） 将

position:static

应用于带有类

容器的
主标题条目title
元素的父元素

3） 将
position:relative
应用于类为
的
容器
元素的父元素
拉伸\u完整容器\u包裹备用\u颜色灯\u背景\u颜色标题\u容器

另外，欢迎使用stackoverflow:）
感谢它的工作，但在移动设备上，它的高度和底部都有点小。我怎样才能控制它？使用媒体查询？