Remove background image on mobile - by heltaskelta

This topic has 8 replies, 2 voices, and was last updated 5 years, 7 months ago ago by Rose Tyler

  • Avatar: heltaskelta
    heltaskelta
    Participant
    September 27, 2018 at 16:28

    Hi,

    How could I remove the background image on mobile devices?

    In the Boxed format I have a background image set. I only want this to load on desktop view. Although it is not visible on a mobile device, it still loads the images which causes unnecessary load time on a mobile.

    Let me know please.

    Thx 🙂

    7 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    September 28, 2018 at 08:32

    Hello,

    Please provide me screenshot where the bg image needs to be removed + your site URL and temporary wp-admin access.
    Also, do not forget to optimize image – https://tinypng.com/

    Regards

    Avatar: heltaskelta
    heltaskelta
    Participant
    September 28, 2018 at 11:59

    Background image is already optimised and needs to be removed site-wide for all mobile devices only. So it is only visible on the desktop version of the site.

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    September 28, 2018 at 12:10

    Hello,

    You can add a custom class for an element with bg image and use this custom css code in style.css file of your child theme:

    @media (max-width: 480px) {
        .my-custom-class {
            background-image:  none;
        }
    }

    Regards

    Avatar: heltaskelta
    heltaskelta
    Participant
    September 28, 2018 at 13:14

    Hi, I need to apply this to the website background image which is visible site wide when using Boxed view. So I cannot add a custom class to this element as it is an element already predefined in your theme. I don’t want to load this image on mobile devices including phones and tablets.

    Please let me know.

    Thx 🙂

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    September 28, 2018 at 13:24

    Hello,

    @media (max-width: 992px) {
        body {
            background-image: none;
        }
    }

    Regards

    Avatar: heltaskelta
    heltaskelta
    Participant
    September 28, 2018 at 13:51

    Perfect 🙂

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    September 28, 2018 at 13:58

    Would you mind to rate our product: https://themeforest.net/downloads
    That would be much appreciated 🙂

    Regards

  • Viewing 8 results - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.