背景图像上的图像

Question

我需要帮助，但到目前为止我没有找到任何合适的答案。我想在我的网站上制作全宽和全高的背景图像，并且可以响应任何分辨率，这没关系，但问题是当我放置其他图像时（我在背景 img 上有 7 个图像）。我放置它们并为每个分辨率设置媒体查询，只有在全屏时才可以，但是当我在浏览器中使用地址栏和书签栏定期观看时，一切都乱七八糟，甚至我的背景图片也不再是全宽和全高。抱歉英语不好。

正文的 CSS：

  body {
    background-image: url('images/background1.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: scroll;
    background-size: 100% 100%;
    height: 100vh;
    margin: 0px;
}

然后我把我的图像和边距 - 左、右、下、上放置在媒体查询中以用于不同的屏幕分辨率。

我需要为图像或其他东西设置适当的位置吗？请给我一个提示。

编辑：

This is what I get in fullscreen and it is ok

But this is when is not fullscreen

除条带外，所有图像都是背景图像的一部分。 图像只有边距样式，没有别的。它们位于浮动样式的 div 中。

Answer 1

使背景图像具有响应性的最简单方法是：

img{
  background-image: url('.../your-image.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}