Struggling with HTML
<div class="outer">
<div class="bgimagegradient"></div>
<img src="foo.jpg">
<div>
.backgroundimage {
position: absolute;
right: 25px;
z-index: -100;
height: 400px;
.bgimagegradient {
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
background-image: linear-gradient(to right, white 10%, rgba(0, 53, 107, .5));
}
> img {
position: relative;
right: 0px;
top: 0px;
z-index: 0;
}
}
Experiencing an issue where the gradient is too tall:
https://i.sstatic.net/WijDQ.jpg
The problem occurs at the bottom of the image, with the gradient extending about 4px past the image.
In scenarios where the image size meets the container's max width, it works fine. However, when scaled down for smaller screens, the issue arises.