html - 无论屏幕大小如何，容器周围的图像都会跟随容器

Question

这是我的元素的实时链接 - http://sunwaycleanairproject.com/pledge

我在图 block 的 Angular 周围放置了 3 张图片 -

 <div class="back-top-right"></div>
 <div class="back-bottom-right"></div>
 <div class="back-bottom-left"></div>

.master-container .back-top-right {
position: absolute;
top: 2%;
left: 78%;
background: url(../../images/27.png) center center no-repeat;
width: 248px;
height: 214px;
content: ' ';
}

.master-container .back-bottom-left {
left: -22px;
bottom: 40px;
background: url(../../images/28.png) center center no-repeat;
width: 248px;
height: 253px;
}

.master-container .back-bottom-left {
left: -22px;
bottom: 40px;
background: url(../../images/28.png) center center no-repeat;
width: 248px;
height: 253px;
}

如何改进我的 CSS 以使图像根据容器移动并保持原位？

我正在使用 15 英寸 macbook pro 屏幕，全屏显示效果不错。如果我在不同的屏幕尺寸(尤其是较大的屏幕)上查看此网站，这些图像将无处不在。我希望它们始终留在原地，始终位于网格容器的 Angular 落。

Answer 1

使某些屏幕的大小固定。媒体查询将有所帮助