我想在我的网站背景上显示一些随机的设计图像作为背景图像，现在的问题是每次我放置这样的图像时，它都会以某种方式与附近的盒子交互。我只想让我的设计图像(小图标等(成为背景的一部分，而不接触其他非设计元素，如文本、方框等。
我想是这样的：
body {
min-height: 100vh;
position: relative;
height: auto;
width: auto;
background-image: url("/static/pattern.jpg");
background-repeat: repeat;
z-index: -10;
} -> "The actual background of the site"
.design_element_01 {
position: relative;
z-index: -1;
background-image: url("/static/xyz.png");
max-width: 100px;
} -> "The design element that should get placed onto the body background from above"
尝试：
.design_element_01 {
position: absolute
/*...*/
}
此外，您可能需要将max-width更改为width，因为background不会为元素提供宽度。
背景居中
有几种不同的方法来集中背景。我将在这里概述一个；如果它对你不起作用，我可以描述其他人。
从本质上讲，这个想法是使.design_element_01元素本身占据整个页面。然后，background-size可以用来约束背景的大小，background-position可以用来居中。一个基本的例子是：
.design_element_01 {
position: absolute;
top: 0;
left: 0;
background: url("/static/xyz.png");
width: 100%;
height: 100%;
/* I'm using 100px here since you used max-width: 100px, but you can use whatever you want. */
background-size: 100px;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
}
(请注意，我还没有测试过这个；你可能需要调整它。(
然而，如果您测试这个例子，您会注意到这将背景集中在屏幕上，但不一定是整个页面。这可能是你想要的，也可能不是你想要的。如果没有，您可以更改<body>元素的位置属性：
body {
position: relative;
}
这应当使得.design_element_01元件相对于<body>元件定位。
我还创建了一个JSFiddle示例来演示该解决方案：https://jsfiddle.net/mouqewzv/.
最后，如果您不希望元素完全居中，而只是从中心偏移，则可以调整design_element_01的left和top属性，将背景最初定位在中心，然后偏移。
尝试将design_element_01位置设置为绝对非相对然后尝试使用左：右：顶部：底部：z索引：
希望这能奏效！