I am currently working on layering images over a large logo and making sure it remains responsive. I want the overlaid images to maintain their position on the logo even when the browser window size is reduced.
Here is what my current browser display looks like (I aim for the images to stay in place while resizing): current browser view
Below is the code I have developed so far:
#frame {
display: inline-flex;
justify-content: center;
width: 100%;
}
#logo-canvas {
width: 60%;
margin-left: auto;
margin-right: auto;
}
.parent-photo {
position: relative;
}
#child-photo1 {
width: 4rem;
height: 4rem;
border-radius: 50%;
position: absolute;
left: 1rem;
top: 1rem;
}
#child-photo2 {
width: 4rem;
height: 4rem;
border-radius: 50%;
position: absolute;
left: 2rem;
top: 2rem;
}<section>
<div id="frame" class="parent-photo">
<img id="logo-canvas"src="assets/images/salmon-logo.png" alt="Wild Logo Shape">
<!--<div id="parent-photo"> -->
<img id="child-photo1" src="assets/images/Lorem-Ipsum-alternatives.png" alt="Photo 1">
<img id="child-photo2" src="assets/images/Lorem-Ipsum-alternatives.png" alt="Photo 2">
<!--</div> -->
</div>
</section>Although I initially thought the parent/child relationship with the position attribute would work, I seem to be stuck (possibly due to the flex property interfering). As a beginner, any assistance would be greatly appreciated!
Thank you in advance to anyone who can provide guidance! :)