Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #653223

    Hi

    My site has uses color section that has a section background image but the image is not responsive when viewing on mobile. The background image is cut off.

    The following settings are:

    Section Layout: At least 75% of Browser Window Height
    Section Padding: Default Padding
    Section Top Border Styling: Display simple top border
    Section Bottom Border Styling: No border styling

    Section Background
    Background Attachment: Parallax
    Background Image Position: Center Center
    Background Repeat: Stretch to fit (stretches image to cover the element)

    #653396

    Details below

    #653653

    Hi,

    Displaying background images the same on all types of screens is more or less impossible unfortunately due to the different dimensions of screens, one option you could try would be to create a second section which will only show for mobile devices, and use an image better adapted to small screens. You can then use CSS like this to hide/show the correct section:

    @media only screen and (max-width: 767px) {
    #desktop-section {
    display:none !important;
    }
    }
    
    @media only screen and (min-width: 768px) {
    #mobile-section {
    display:none !important;
    }
    }

    Best regards,
    Rikard

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.