Geek Answers Handbook

How to remove background image for mobile site?

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

+4
source share
3 answers

Actually, to hide the background image here , it is just css:

background-image: none;

Here is a 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.

+1
source

, .

​​ . / , #container.

, -, . Popnoodles, .

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

More articles:


All Articles