使用 SVG 和 CSS 的具有前景层的背景图像

Question

First of all, thank you for reading this.

Problem

I wonder if there exists a way to create some kind of 3d website background, for instance from a SVG file and some CSS codes ? More precisely, is it possible to set some layers of a SVG background to be in front of the html body elements ? Since it is not possible to use z-index in SVG file , I wonder if there exist a workaround to achieve this.

Example

To give you a concrete example, I would really appreciate to do this on a SEO consultant website . For this specific example, how can I force the clouds (at the bottom of the background image) to be in foreground so that the text and every body elements appear from behind the cloud (including the sidebar) ?

Illustrations: Current display vs. Desired display

Notes

(1) Currently the format is jpg (& webp), since I encountered compatibility issues with macOS devices and SVG background. Moreover, I'm not sure that using SVG as website background is a good idea.

(2) I initially tried to add the clouds as a separate image in a specific div but then I could not figure out how to apply identical responsive setting as the ones of the background img (set by the theme I'm using).

I'd be very grateful for any advice or idea you may have.

Thank you. :)

Answer 1

You are right in that SVG elements cannot be positioned using z-index, but the SVG element itself can be styled/ordered so that it overlays the HTML.

 svg { position: fixed; width: 50%; bottom: 0; right: 0; }

 <section> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eros in cursus turpis massa tincidunt. Mi sit amet mauris commodo quis imperdiet. Felis donec et odio pellentesque. Leo urna molestie at elementum eu facilisis. Pretium aenean pharetra magna ac placerat. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices. Nunc vel risus commodo viverra maecenas. Volutpat consequat mauris nunc congue nisi. Sit amet aliquam id diam maecenas. Nunc sed blandit libero volutpat sed cras. In est ante in nibh mauris cursus mattis molestie a. Quis lectus nulla at volutpat diam ut venenatis tellus in. Ut venenatis tellus in metus. Diam donec adipiscing tristique risus nec. Tellus at urna condimentum mattis pellentesque id. Purus in mollis nunc sed id semper risus in.</p> <p>Interdum velit laoreet id donec ultrices. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Eu facilisis sed odio morbi quis commodo. Et tortor at risus viverra adipiscing at. Gravida neque convallis a cras semper. Auctor urna nunc id cursus metus aliquam eleifend mi. Sit amet commodo nulla facilisi nullam vehicula ipsum a. Mi proin sed libero enim sed faucibus turpis. Fermentum leo vel orci porta non pulvinar neque. Varius sit amet mattis vulputate enim nulla aliquet. Semper eget duis at tellus at urna condimentum mattis. Viverra accumsan in nisl nisi scelerisque eu. Malesuada bibendum arcu vitae elementum. Lacinia quis vel eros donec ac. Turpis tincidunt id aliquet risus feugiat in. Non consectetur a erat nam at lectus urna duis convallis. Risus sed vulputate odio ut enim blandit. Vitae elementum curabitur vitae nunc sed velit. Faucibus nisl tincidunt eget nullam non nisi. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet.</p> <section> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 3"> <circle r="1" cx="3" cy="3" fill="blue"/> <circle r=".5" cx="1.5" cy="3" fill="blue"/> </svg>