So I am trying to have one image overlay another like the image. The screenshot image is how I wish the images to be placed. Screenshot of an image overlaying another
However whenever the screen change it size, the overlaying image doesn’t move with it. It keeps its position on the screen no matter what I try or changes. I would like for it to have the same position on the background image.
I’ve tried changing the position for both background and overlay image, but it just made the image end up beside each other. Ive also tried changing width for both images and container + looking for others who had the same problem but just doesn’t seem to work.
.img-container {
position: relative;
width: 800px;
/* Set to the size of your background image */
height: auto;
}
.background-img {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
/* Background image stays behind */
}
.overlay-img {
position: absolute;
top: 10rem;
/* Adjust the position of the overlay image */
left: 45rem;
max-width: 100%;
/* Set size of the overlay image */
z-index: 2;
/* Overlay image appears on top */
}<section id="portfolio">
<div class="img-container">
<img class="background-img" src="https://picsum.photos/1000/1000">
<img class="overlay-img" src="https://picsum.photos/200/300" alt="">
</div>
</section>8
Instead of using top: 10rem; left: 45rem;, you can simply use bottom and right to place the image on the right bottom side of the background image.
.img-container {
position: relative;
width: 100%;
max-width: 800px;
height: auto;
}
.background-img {
width: 100%;
height: auto;
display: block;
}
.overlay-img {
position: absolute;
bottom: 10px;
right: 10px;
max-width: 100%;
z-index: 2;
}<section id="portfolio">
<div class="img-container">
<img class="background-img" src="https://picsum.photos/1000/1000">
<img class="overlay-img" src="https://picsum.photos/200/300" alt="">
</div>
</section>and even you make the window smaller or larger then it moves according to that.
Update:
As you would like to place the overlay image on top of background image like in your screenshot, you can use similar method.
.img-container {
position: relative;
width: 100%;
max-width: 50vw;
height: auto;
}
.background-img {
width: 100%;
height: auto;
display: block;
}
.overlay-img {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
z-index: 2;
}<section id="portfolio">
<div class="img-container">
<img class="background-img" src="https://picsum.photos/1000/1000">
<img class="overlay-img" src="https://picsum.photos/1000/1000" alt="">
</div>
</section>