It would be best to see the live page to give you a thorough answer, but based on the CSS code you posted, if you change the background-size: cover; to background-size: contain; your image should shrink with the width of the browser. You can also try background-size: 100%;
If you can post the live website, I will take a look at it.
I’m also not sure at the moment whether it would even work the way I imagine it would.
The height should always remain 300 pixels as an example, the image should be a maximum of 1400 pixels wide and otherwise not be cropped, but everything should always be visible horizontally.
So either the height has to change, or the lower part of the image has to be cropped (as it currently is).
Perhaps it would also make more sense not to insert the image as a background, but as a normal image or picture set? With the corresponding media queries? If necessary, 3 different variants?
It’s only going to cover and resize as much as possible based on the available image information it has to work with.
I believe it values width over height and that’s why it overflows the height.
And that’s mainly because you’re defining a height to the box (DIV) and not a height to the image it’s self.
For example, you can’t stuff a 16:9 into a 4:3 and not have it overflow, something has to give somewhere.
You would have to maintain to dimensions of the image for it to look and flow correctly.
It might be best to define media queries that change the height of the box so that the image remains visible and not overflow it’s container.
Maybe you can try stuffing an empty flexbox container and column and define the height with media settings as a spacer.
Unfortunately I cannot open your bsdesign file because I’m stuck on Windows 7 and can’t update to the latest version of Bootstrap Studio, however I looked at your exported website in a browser and the background image seems to be behaving as it should when you use background: cover;
Based on your explanation, it sounds like you want the image height to always remain the same, and the width to stretch so that nothing is ever cropped, but rather the image always fills the background. So if you use the following CSS, it will achieve the results you’re describing…
background: 100% 100%;
But the result will be that the image will look distorted in the horizontal dimension. You may need to use a media query or a min-width rule to prevent the image from becoming weirdly thin at mobile sizes. If this is not the look you’re after, you may need to create different background images for different screen sizes.
Is the effect something you’ve seen on another website that you’re trying to reproduce? If so, post the website.
One question: my photo is 1290 pixels wide, when I add your code to my project, the photo is displayed 30 pixels wider (XXL view = 1320 pixels) than the original.
Is there any padding or something going on here?
PS: it’s also visible in your example compared to the header block.
