I am struggling to position the background image of <body> relative to one specific child <div>.
<body>
<div>content</div> <-- place background image of body relative to this div
<div>other content</div>
</body>
https://i.sstatic.net/oFZBi.png
The background image is larger than the viewport and needs to start outside of the viewport at the top left corner.
Initial failed solution
I initially tried adding the image as an <img> with a negative z-index and position: absolute, but this caused horizontal scrollbars due to the image size.
<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>