I've been spending days trying to figure out the best way to properly display a background image on various screen sizes.
Check out this working example at . You can also view it on JSFiddle for better clarity.
The issue I'm facing is as follows:
The original image size is 1920x920.
Below is the SASS class used for the header image.
$header-min-height: 920px;
.l-header {
min-height: $header-min-height;
height: 110%;
width: 100%;
@include background-size(cover);
background-position: center top;
background-repeat: no-repeat;
background-image:url('../images/background-header.jpg');
@include respond-to-less-than(desktops) {
min-height: $header-min-height*1.6;
}
@include respond-to-less-than(tablets) {
min-height: $header-min-height*1.8;
}
}
The initial header background image looks decent but when the screen size decreases, the image scales due to the background-size property which affects the image quality. Adjustments have been made to the min-height for smaller screens to accommodate content within the image.
In cases of square images, cropping could be a solution to show only part of the image while hiding the rest under another div. However, with an image like mine that has rounded borders, achieving the same results with CSS alone is challenging.
I aim to achieve a result similar to the desired look shown below:
To create this picture, I cropped a section of the original image equal to the previous screenshot.
Like this
I'm struggling to find a solution to make the image look good on different screens. Is changing images according to screen size (like using srcset) the only viable option? Any suggestions or help would be greatly appreciated.
Thank you!