'I have one background image which is responsive. but two images over the background image are not responsive. How to make those images responsive?

I have one background image which is responsive. but two images over the background image are not responsive. How to make those images responsive?

My background image is working fine when I resize the window it is responsive. but two images which are placed on background image are not responding when I resize the window. How to make both foreground images responsive?

CSS code:

.wrapper {
    position: relative;
    width: fit-content;
    height: fit-content;
}

.Icon1 {
    position: absolute;
    left: 50%;
    top: 77%;
    transform: translate(-50%, -50%);
    width: 130px;
}
    
.Icon2 {
    position: absolute;
    left: 50%;
    top: 84%;
    transform: translate(-50%, -50%);
    width: 130px;   
}

HTML code:

<div class="col-xs-12 col-sm-6 col-no-padding wrapper">
    <img class="img-responsive" src="background1.jpg"
    alt="Responsive Image1" width="700" height="auto"/>

    <a href="https://www.google.com/"><img src="Images1.png" 
    class="Icon1" alt="Responsive Image" width="auto" height="auto"/></a>

    <a href="https://www.google.com/"><img src="Image2.png"
    class="Icon2" alt="Responsive Image" width="\auto" height="auto"/></a>
</div>
htmlcss


Solution 1:[1]

Use vw instead of px when you want to make some elements width according to screen width, Here is more about css units.

Here's an example of your code using vw, 

.wrapper {
    position: relative;
    width: fit-content;
    height: fit-content;
    
    }
    .Icon1 {
    position: absolute;
    left: 50%;
    top: 77%;
    transform: translate(-50%, -50%);
    width: 20vw;
    }
    
    .Icon2 {
    position: absolute;
    left: 50%;
    top: 84%;
    transform: translate(-50%, -50%);
    width: 20vw;
    
    }

.img-responsive{
  width:100vw;
}
<div class="col-xs-12 col-sm-6 col-no-padding wrapper">
  <img class="img-responsive" src="https://placekitten.com/640/360" alt="Responsive Image1"  />
  <a href="https://www.google.com/"><img src="https://placekitten.com/640/360" class="Icon1" alt="Responsive Image"/></a>
  <a href="https://www.google.com/"><img src="https://placekitten.com/640/360" class="Icon2" alt="Responsive Image" /></a>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 rootShiv

Related Questions