Search code examples
csswordpresspositionwidth

In CSS how can I scale an absolute positioned image while keeping its position over its container while browser window width decreases?

I have a 100% width Div and two absolute positioned images hovering over the Div (z-index:1;), my problem is, when the user decreases the browser window and the Div width decreases accordingly, because some elements have text wrapping etc in my theme this means that the hovering images remain in their absolute position instead of being pushed down the page like the div and other elements of the page has.

I am trying to avoid using @media in my CSS to re-position the images.

I have tried to show this in one image, but at three different browsers sizes. The first screenshot is how it should look, the second screen is around width:1030px and the final screenshot is around width:930px

enter image description here

Solution

  • In fact, I thought I had tried everything, but when trying to place the code in again to show you guys it seems I have stumbled across the answer which works this time around:

    <div class="FrontPageBanner-1">
<h3>Lorem ipsum dolar sit amet</h3>
</br>
<span>Lorem ipsum dolar sit amet</span>
<img class="FrontPageBanner-1-Img-1" src="https://thailandpoolshop.com/wp-content/uploads/2018/07/S200_Banner_Robot.png">
<img class="FrontPageBanner-1-Img-2" src="https://thailandpoolshop.com/wp-content/uploads/2018/07/wave_banner_robot.png">
</div>

    CSS:

    .FrontPageBanner-1 {
width:100%;
position:relative;
background: linear-gradient(to right, #48e2ff, #396fcf);
border-radius:10px;
}

.FrontPageBanner-1-Img-1 {
position:absolute;
width:280px;
left:21px;
top:-70px;
z-index:1;
width:280px;
max-width:280px\9;
}

.FrontPageBanner-1-Img-2 {
position:absolute;
width:26%;
right:23px;
top:-47px;
z-index:1;
width:280px;
max-width:280px\9;
}

    So I guess I will add this to my CSS instead of having it in my code for quick example purposes. The only slight problem I see is that when using max-width:280\9; The images still do not shrink as fast as what the themes @media (max-wdith:xxxx) does.