相对于 child div 定位正文背景图片

Question

我需要相对于 child <div> 之一定位 <body> 的背景图像。

<body> 
    <div>content</div>       <-- place background image of body relative to this div
    <div>other content</div>
</body>

背景图片尺寸大于视口，其左上角应放在视口外。

我不成功的做法

我的方法是将图像添加为 <img>，带有负数 z-index 和 position: absolute，但由于图像大小

，此方法添加了水平滚动条

<body>
    <div style="position: relative">
        <img 
            src="..." 
            style="position: absolute; top: -100px; left: -400px; width: 800px; height: 600px; z-index: -1;" 
        />
        <div>content</div>
    </div>
</body>

Answer 1

您可以使用 overflow-x:hidden; 修复您的方法；在溢出的元素上或尝试使用内联显示绝对位置

Answer 2

如果图像将成为 <body> 的背景，使用 CSS 而不是尝试将其作为 <img> 插入到 HTML 页面，那么您可以也许使用 50% 50% 来定位它？

50% 50% 会将图片放在正中央。

body{
  background: ( path-to-your-image ) 50% 50% no-repeat;
}

所以您可能想尝试类似这样的方法将其向左移动一点。

body{
  background: ( path-to-your-image ) 15% 50% no-repeat;
}

相对于 child div 定位正文背景图片

Position body background image relative to child div

css

background-image

bootstrap-5