I'm trying to place an image below everything in a box, I tried many methods, like a background-url and also moving its margins to the bottom, but as soon as I change the size of the page, it moves to any side, is there any way to leave the image completely fixed in a box made in CSS?
This is what I did yesterday, but I have a hard time moving the image because when I change the size of the box, the image moves to any side
<section>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Qui nam vitae perspiciatis dolorum iusto quidem,
totam veniam obcaecati iure rem
officia itaque possimus quo voluptatibus asperiores,
fuga reiciendis unde vero?</p>
<img src="img/header-bottom.png" alt="" srcset="">
</div>
</section>
CSS code:
.content{
width: 80%;
background-color: yellowgreen;
height: 750px;
margin-left: auto;
margin-right: auto;
margin-top:50px;
margin-bottom: 50px;
}
.content img{
position: relative;
max-width: 500px;
object-fit: cover;
}
That's my question Thanks for your help Regards
You can do the following:
content
a display of typeflex
flex-direction
with a value ofcolumn
justify-content: space-between;
align-items: center;
margin: 0;
So your CSS should look like this:
And it would look more or less like this:
The rest of your HTML stays the same.....