estoy intentando colocar una imagen debajo de todo en un box, intente muchos metodos, como un background-url y tambien moviendo sus margenes hasta abajo, pero en cuanto cambio el tamaño de la pagina, este se mueve para cualquier lado, hay alguna forma de dejar la imagen completamente fija en una caja hecha en CSS?
Esto es lo que hice yo ayer, pero me cuesta desplazar la imagen ya que al cambiar el tamaño de la caja, la imagen se mueve a cualquier lado
<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>
codigo CSS:
.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;
}
Esa es mi pregunta Gracias por su ayuda Saludos