In my design, I am using a full-width cover image with a bootstrap container class containing an absolutely positioned image on top of the cover image. My goal is to have this image positioned exclusively on the right-hand side of the container.
Below is the code snippet:
<div id="header">
<div class="container">
<img src="header-icon.png" class="header-icon" />
</div>
</div>
#header {
background-image: url('cover.jpg');
background-size: cover;
height: 300px;
position: relative;
.header-icon {
position: absolute;
bottom: 0;
}
}
When I tried adding right: 0 to the header-icon, it ended up aligning outside the container. I could resort to using media queries to adjust the icon based on screen size, but I am curious if there's a more efficient solution available.
I also experimented with making the icon relative to the container, but this approach seemed to disrupt my desired layout.