Currently, I am working with two background images, each accompanied by a red box positioned absolutely inside a bootstrap container. The first red box is located on the right side and the second red box is on the left side.
So far, everything is running smoothly.
Now, my challenge lies in adjusting the width of the background image to create space on the left for the first image and on the right for the second image.
The issue arises when this adjustment impacts the position of the container, which I want to remain constant.
Without any added space:
https://i.sstatic.net/ig6hp.jpg
Please refer to the image below with space included:
https://i.sstatic.net/A7Mzn.jpg
.bodywrapper {
margin-top: 40px;
}
.container {
position: relative;
height: 100%;
}
.bannerBg {
height: 350px;
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 30px;
width: 92%;
}
.wrapperOne {
background-image: url('https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg');
}
.wrapperTwo {
background-image: url('https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg');
}
.box {
background-color: red;
height: 220px;
width: 320px;
position: absolute;
bottom: 0
}
.rightside {
right: 0;
}
.leftside {
left: 0;
}<div class="bodywrapper">
<div class="wrapperOne bannerBg ml-auto">
<div class="container">
<div class="box rightside"></div>
</div>
</div>
<div class="wrapperTwo bannerBg mr-auto">
<div class="container">
<div class="box leftside"></div>
</div>
</div>
</div>I am seeking guidance on whether or not this adjustment is possible without altering the container's position.