Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • January 17, 2017 at 6:09 pm #734882
    ncfan2030

    Is there a way to make the background images responsive? When you view certain images that are full width background images on smaller devices, they don’t look very good on mobile or smaller devices. Thank you!

    January 20, 2017 at 6:23 am #736218
    Ismael

    Hey ncfan2030,

    Thank you for using Enfold.

    How do you want the background image to display on mobile or smaller screens? One thing that you can do is to set the Background Image Position settings to “Center center”. You can also apply a different version of the image that is specifically created for smaller screens. Edit the color section, apply a Section ID to it, use “custom-section” for example then add the following css code in the Quick CSS field.

    @media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
    #custom-section {
       background-image: url(https://alphametic.com/wp-content/uploads/2014/08/mobile_version_of_the_image.jpg) !important;
    }
}

    Adjust the image url.

    Best regards,
    Ismael

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