javascript - How to change background image in mobile? - Stack Overflow

admin管理员组

文章数量:1356702

I am developing a simple html page with a background image.On a desktop, the background is displaying perfectly but I am trying to change the background image on a mobile device.

The html and css is as follows :

HTML

<div class="pc-img" ></div>
<div class="mobile-img" ></div>

CSS

body
{
    margin:0px;
    padding: 0px;
}

.pc-img {
     min-height: 95% !important;
    height: 100%;
    width: 100%;
    background-image: url('.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    color: white;
}
}

.mobile-img
{
    display: none;
}

@media only screen and (max-width: 384px) {

.mobile-img
    {
         background: url('.jpg');

       visibility: visible;
}

.pc-img
{
    visibility: hidden;
}
}

I am developing a simple html page with a background image.On a desktop, the background is displaying perfectly but I am trying to change the background image on a mobile device.

The html and css is as follows :

HTML

<div class="pc-img" ></div>
<div class="mobile-img" ></div>

CSS

body
{
    margin:0px;
    padding: 0px;
}

.pc-img {
     min-height: 95% !important;
    height: 100%;
    width: 100%;
    background-image: url('http://www.laminaresearchcenter./images/ingsoon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    color: white;
}
}

.mobile-img
{
    display: none;
}

@media only screen and (max-width: 384px) {

.mobile-img
    {
         background: url('http://www.outbarga.in/images/ingsoon.jpg');

       visibility: visible;
}

.pc-img
{
    visibility: hidden;
}
}

• javascript
• html
• css
• media-queries

Share Improve this question Follow edited Jan 28, 2016 at 5:58 Wai Ha Lee 8,8169999 gold badges5959 silver badges9595 bronze badges asked Jan 28, 2016 at 5:51 user6930268user6930268

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

You don't need 2 class and 2 divs to do this. You can set @media queries for one div, and change his properties.

CSS:

.pc-img {
  width: 100%;
  height: 400px;
  background: #000;
}

@media screen and (min-width: 100px) and (max-width: 480px) {
  .pc-img {
    background: purple;
  }
}
@media screen and (min-width: 480px) and (max-width: 768px) {
  .pc-img {
    background: yellow;
  }
}

Look this demo: Demo 1

Btw, if you want two divs, make this: Demo 2

.pc-img {
  width: 100%;
  height: 400px;
  background: #000;
}
.device-img {
  background: steelblue;
  width: 100%;
  height: 400px;
}
@media screen and (min-width: 100px) and (max-width: 480px) {
  .device-img {
    display: block;
  }
  .pc-img {
    display: none;
  }
}
@media screen and (min-width: 480px) and (max-width: 768px) {
  .device-img {
    display: block;
  }
  .pc-img {
    display: none;
  }
}

You must give display:blockto mobile-img class and display:none to pc-img class in media query

@media only screen and (max-width: 384px) {  
    .mobile-img
        {
           display: block;
           background: url('http://www.outbarga.in/images/ingsoon.jpg');
           visibility: visible;  
    }
    .pc-img {
         display: none;
    }

Responsive page

body
{
    margin:0px;
    padding: 0px;
}

.pc-img {
     min-height: 95% !important;
    height: 100%;
    width: 100%;
    background-image: url('http://www.laminaresearchcenter./images/ingsoon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    color: white;
}
}

.mobile-img
{
    display: none;
}

@media only screen and (max-width: 384px) {

.mobile-img
    {
         background: url('http://www.outbarga.in/images/ingsoon.jpg');

       display: block;
}

.pc-img
{
    display: none;
}
}

<div class="pc-img" ></div>
<div class="mobile-img" ></div>

use display:none and display:block property in stead of visibility

.mobile-img{display:none;}
@media only screen and (max-width: 384px) {  
.mobile-img {
   display: block;
   background-image: url('http://www.outbarga.in/images/ingsoon.jpg');
}
.pc-img {
  display: none;
}

make it background-image instead of just background

@media only screen and (max-width: 384px) {
    .mobile-img
    {
       background-image: url('http://www.outbarga.in/images/ingsoon.jpg'); 
       visibility: visible;
    }
}

本文标签： javascriptHow to change background image in mobileStack Overflow