Dear Enfold team,
I am using a Color Section with a background image with the following settings:
Background Attachment: Fixed
Background Image Position: Top Center
Background Repeat: Scale to fit
But even when scale to fit says that the whole image is always visible, it does seem to display fully on mobile devices and tablets. How could I accomplish this? (Please see private content attached)
Thanks for your help!
Hey Esteban,
Sorry for the very late reply and thanks for your screenshots and link to your site.
I believe the solution to this is to assign the “background-size” to your background image based on the device orientation, so when the device is in portrait mode the background-size should be “contain” so the whole image will display, and when the device is in landscape mode the background-size should be “cover”. In my tests in portrait mode the image was too close to the top so this css also centers the background.
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
@media only screen and (max-width: 1024px) and (orientation: landscape) {
#av_section_1 > .av-parallax {
background-size: cover !important;
}
}
@media only screen and (max-width: 1024px) and (orientation: portrait) {
#av_section_1 > .av-parallax {
background-size: contain !important;
background-position: 40% center !important;
}
}
Then clear your browser cache and check.
Another approach would be to use a different sized background image depending on the device, currently your image is 1920 x 1080 which is a landscape orientation, try creating another image with a portrait orientation such as 768 x 1080 and use as a background image for a second color section on the page. Then set each to show for the correct device orientation.
Best regards,
Mike