When the image is in the background, we will have content(texts, headings, etc.) in the foreground.
There are mainly two aspects here - the background image and the position of content concerning the background image.
We will understand the position property first to ensure we are on the same page.
Understanding Position Property:
Position: Where to place the elements on the webpage?
For demonstration, paste this code on your HTML file.
<div class="outer-container">
<div class="inner-container">
<div class="box absolute">
<p>Absolute</p>
</div>
<div class="box relative">
<p>Relative</p>
</div>
<div class="box fixed">
<p>Fixed</p>
</div>
</div>
</div>
Add this to your CSS file.
body {
margin:0;
padding:0;
box-sizing: border-box;
}
.outer-container {
border: 3px dashed black;
width: 75vw;
height: 85vh;
margin: 40px auto;
}
.inner-container {
border: 2px dashed blue;
width: 40vw;
height: 50vh;
margin: 200px auto;
}
.box {
width: 150px;
height:150px;
color:white;
padding:1rem;
}
CSS has four crucial position values - Static, Absolute, Relative, Fixed, and Static.
Position - Static and Absolute:
Whatever you have done in CSS without position property - by default, it is static positioning.
So when you give position static, nothing will change. It goes with webpage flow.
Let's dig into the absolute position.
Add this CSS,
.absolute {
background-color: blue;
position: absolute;
}
Then change,
.absolute {
background-color: blue;
position: static;
}
Did you notice any difference?
No, right?
Then why two position values, and what is the difference between them?
It is the add-on property that makes the difference.
Add-ons are top, right, bottom, and left.
Paste this code,
.absolute {
background-color: blue;
position: absolute;
top: 0;
left: 0;
}
You will get this,

Paste this code,
.absolute {
background-color: blue;
position: static;
top: 0;
left: 0;
}
You will be back to normal flow.
Why it goes to the top left corner when the position is absolute?
Absolute positioning allows an element to be positioned relative to its closest-positioned ancestor(relative, absolute, fixed, or sticky).
Also, note ancestor position should not be static because it implies the normal page flow.
If there is no such ancestor, it goes relative to the viewport(browser window).
Let's play with it
Add this code,
.outer-container {
border: 3px dashed black;
width: 75vw;
height: 85vh;
margin: 40px auto;
position: relative;
}

What if it is more than one ancestor?
Paste this code,
.outer-container {
border: 3px dashed black;
width: 75vw;
height: 85vh;
margin: 40px auto;
position: relative;
}
.inner-container {
border: 2px dashed blue;
width: 40vw;
height: 50vh;
margin: 200px auto;
position: relative;
}

Absolute picks up the closest ancestor.
Position - Relative:
This is the same as absolute, except it defaults to the closest parent no matter parent has position property or not.
Paste this code,
.outer-container {
border: 3px dashed black;
width: 75vw;
height: 85vh;
margin: 40px auto;
}
.inner-container {
border: 2px dashed blue;
width: 40vw;
height: 50vh;
margin: 200px auto;
}
.relative {
background-color: red;
position: relative;
}

Position - Fixed:
Fixed -> No matter if you scroll, its position is fixed.
Let us demonstrate,
Paste this code,
.fixed {
background-color: green;
position: fixed;
}
It will be placed at normal page flow(i.e., its original position).
When scrolled,

When you give add-on properties like the top, right,etc
Paste this code,
.fixed {
background-color: green;
position: fixed;
top:100px;
right: 100px;
}

This is important,
When you specify values for the top, right, bottom, and left properties on a position: fixed element, the element is moved from its original position by the specified amount in the specified direction relative to the viewport.
Position - Sticky:
It is a mix between relative and fixed.
It will be at normal page flow.
When scrolled down, it will be fixed.
The critical thing to remember here is position: sticky is based on the parent element.
For demonstration purposes,
I have this code,
<div class="outer-container">
<div class="box sticky">
<p>Sticky</p>
</div>
</div>
body {
margin:0;
padding:0;
box-sizing: border-box;
min-height: 200vh;
}
.outer-container {
border: 3px dashed black;
width: 75vw;
height: 85vh;
margin: 40px auto;
}
.box {
width: 100px;
height:100px;
color:white;
padding:1rem;
}
.sticky {
background-color: black;
position: sticky;
top:0;
}
See the output,

Points to note:
The fixed aspect is between the boundaries of the parent edges(top and bottom).
The parent element should have height.
Where does the fixed aspect start, and how do we control it? by using the top property.
top --> length between viewport top edge(browser window top) and sticky element top edge.
fixed aspect ends at the parent's bottom edge.
Let's change the top and see,
Paste this code,
.sticky {
background-color: black;
position: sticky;
top:75px;
}
Note: top --> window top to sticky element top.

I hope you find this article helpful.