Having trouble articulating my query, so here's a fiddle: https://jsfiddle.net/8zsqydj0/
.background-img-wrapper:before {
content: "";
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(to right, rgba(252, 252, 252, 1) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, rgba(252, 252, 252, 1) 100%);
}
.background-img-wrapper {
max-width: 1920px;
}
.background:before {
content: "";
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 80%, rgba(252, 252, 252, 1) 100%);
}
.background {
width: 100%;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row justify-content-center position-fixed background">
<div class="background-img-wrapper">
<img class="img-fluid" src="https://via.placeholder.com/1920x1080/000000/" />
</div>
</div>Attempting to add gradient on three sides of the image but facing some challenges. The image is centered and has a fixed maximum width of 1920px. When viewing the gradient on lower resolutions, it looks fine. However, when resizing above 1920px, the gradient moves with the side of the window instead of staying fixed at the edges of the image.
How can I apply the gradient directly to the image itself or constrain the gradient to match the image size? Using Bootstrap 4 for this task.
If there is a better approach to achieving this, please share your suggestions! :)