-
Posts
-
Hello,
We are long-time users of Enfold and have never been able to solve this problem: background images in color sections appear differently on different size laptop and desktop screens. That is, images appear cut off at the bottom, top to bottom, distance greatly varying, depending on the website visitor’s laptop or desktop screen size. We are NOT referring to how images appear on tablets or smartphones, just laptops and desktops.
How can we get the whole image to appear in the same size on these laptop and desktop screens?
I have included a sample page with password, together with an admin user name for you in the private content.
Thanks.
Hey clbdcnpafe,
Thank you for the inquiry.
The issue you’re experiencing with background images appearing differently on various laptop and desktop screens is due to how the background-size: cover; property works in css. When you use background-size: cover; or when the Background Attachment is set to Stretch to fit, the background image is automatically resize to cover the entire container, maintaining its aspect ratio. This often results in parts of the image being cut off, especially if the aspect ratio of the image doesn’t match the aspect ratio of the container.
If you need the whole image to be visible within the container, you can set the background attachment to “Scale to fit”, which will set the background-size to “contain”. However, this might create spaces around the background image if the aspect ratio or size of the container doesn’t match the background image.
For more info about this property, please check the link below:
// https://www.w3schools.com/cssref/css3_pr_background-size.php
// https://developer.mozilla.org/en-US/docs/Web/CSS/background-sizeBest regards,
Ismael
- You must be logged in to reply to this topic.