How to remove background image for mobile site?

Question

I have a background image on my desktop site. However, because of the size it makes the mobile site slow and out of proportion. Is it possible to remove the background image for the mobile site or at least make it responsive?

Solution 1

Actually to hide background image here is the simple css:

background-image: none;

Here is the solution for mobile, i used media queries

HTML

<div class="bgimg" >

</div>

External CSS

/* Show in Large desktops and laptops */
@media (min-width: 1200px) {

.bgimg {
        background-image: url('../img/your-eternity.jpg');
        background-repeat: no-repeat;
        height: 800px;
        width: 1000px;
        background-size:100% auto;
    }

}

/*Hide in Other Small Devices */


/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

      .bgimg {
        background-image: none;
    }

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

          .bgimg {
        background-image: none;
    }

}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

          .bgimg {
        background-image: none;
    }

}

/* Portrait phones and smaller */
@media (max-width: 480px) {

          .bgimg {
        background-image: none;
    }

}

Hope helps someone.

Solution 2

The code below is adapted from a great blog post by Tim Kadlec that walks through the various scenarios for conditionally displaying a background image.

For your scenario, the mobile version is set to match the width of its parent element. Depending on your layout, you may need to set/restrict the size of the element that #container is in.

If you elect to hide the background image on mobile, then the first style block would go inside the first media query and the second one could be eliminated. As popnoodles mentioned, posting some code would make it easier to provide a more specific solution.

<div id="container"></div>

#container {
  background-image: url('images/bg.png');
}

@media all and (min-width: 601px) {
    #container {
        width:200px;
        height:75px;
    }
}
@media all and (max-width: 600px) {
    #container {
        max-width: 100%;
        background-size: 100%;
    }
}