Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • June 25, 2016 at 2:25 am #653223
    kartboy16

    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)

    June 25, 2016 at 7:12 pm #653396
    kartboy16

    Details below

    June 27, 2016 at 5:52 am #653653
    Rikard

    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

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