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?

With no code posted, you're unlikely to get code as an answer. Instead of removing from mobile, you want to add for tablet/desktop so work from smallest upwards, so your background is not set until it hits the media query that works for a screen size larger than whatever value. — Popnoodles, Dec 24 '13 at 03:26

score 10 · Answer 1 · edited May 23 '17 at 10:30

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.

cantera · Answer 2 · 2013-12-24T03:57:09.533

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%;
    }
}

score 0 · Answer 3 · edited May 23 '17 at 12:34

You can use media query to specify different css rules for desktop version of site and mobile site .

Refere How to use CSS media query to scale background-image to viewing window

Using media queries depends on resolution of the screen we can set the styling . Refere https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries for more information about media query .

You can also refer
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ for creating mobile version of your website .

How to remove background image for mobile site?

3 Answers3