Allow Background Image be behind existing content and not push existing content down-CodePudding

Hi There I am trying to get a background image display under my content and still show so content can go ontop of it.

Here is the code I have at the moment it is extremely simple

<div >
a
        <style>
            .flower-image{
            background-image: url("/wp-content/uploads/2022/10/rose-fade-vertical.png");
            background-repeat: no-repeat ; 
            background-position: right ;
             
            
            }
        </style>
    </div>

This code allows for a image specified by URL to load and and some code to stop it repeating and for positioning. The issue I am having is I need the image specified in background-image to not push my existing content down the screen and sit in the same position permanently. This has been done on WordPress on the page page.php so it will do the same thing across every page.

Any help would be appreciated.

CodePudding user response：

Do the following:

add position: absolute; (the content will not be pushed down)
add z-index: -1; (the image will be pushed behind the content)

But...

The content should be in a separate container.

See the snippet below.

Note: position: absolute; might cause some problems (depends on HTML & CSS). If nothing jumps out of place, everything is fine. If not, let me know and we will try to solve the problem.

.wrapper {
  max-width: 100vw;
  max-height: 100vh;
  position: relative;
}

.content-container {
  position: absolute;
}

.image-container {
  position: absolute;
  z-index: -1;
}

#img {
  width: 100%;
  object-fit: cover;
}

<div >
  <div >
    <h1>
      This is some random text
    </h1>
  </div>
  <div >
    <img id="img" src="https://static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg" />
  </div>
</div>