css image swap mobile vs desktop using media query

Question

First of all thank you to all who have added their input. We are very close to having a solution!!! We duplicated the whole div and just removed the parallax-content for the second div and replaced show-on-desktop with show-on-mobile in the second div.

Unfortunately the mobile version isn't displaying the mobile version.

Here is the style sheet

.show-on-desktop {
  /* display can be inline-block, just choose one that suits your need*/
  display: block;

  /* it's your call what the break point is */  
  @media screen and (max-width: 1440px) {
    display: none;
  }
}

.show-on-mobile {
  /* display can be inline-block, just choose one that suits your need*/
  display: none;

  /* it's your call what the break point is */  
  @media screen and (max-width: 411px) {
    display: block;
  }
}

Here is the updated code with the divs displayed

<div class="show-on-desktop bg-img parallax-content" style="background-image: url(img/home-desktop.jpg?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375); background-position: 0px 199.4px;" data-stellar-background-ratio="0.5"></div>

<div class="show-on-mobile bg-img" style="background-image: url('img/home-mobile.jpg?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375');"></div>

---

here is the original post

I have a client who is running a bootstrap framework theme that has parallax sections on the page. These sections look fantastic on a laptop or tablet, however on mobile phones, it just grabs the top left corner of a large image.

I suggested to the client that we write a PHP detection script on the server that identifies the device as either Mobile or not and then swap the image in PHP, so that the image looks optimal on a phone.

However it got me thinking that there's got to be a way to do it in CSS. I'm not that familiar with mobile CSS and so I thought this might be an interesting post for our community.

Here's the one line of code that displays the image.

<div class="bg-img full-height  parallax-content" style="background-image: url('img/image-name.jpg?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375');" data-stellar-background-ratio="0.5"></div>

what I'm looking for is that IF its mobile instead of showing image-name.jpg it will show instead image-mobile.jpg (a different file ) that is sized correctly for mobile.

again, this could be done in PHP but there should be a way to do this in either CS or JS. Any ideas? Thanks in advance.

Answer 1

That is what media queries are for.

@media only screen and (min-width: 601px) {
  .bg-img {
    background-image: url('img/image-name.jpg');
  }
}

@media only screen and (max-width: 600px) {
  .bg-img {
    background-image: url('img/image-mobile.jpg');
  }
}

Answer 2

This can be done easily using media query in CSS

 .show-on-desktop { /* display can be inline-block, just choose one that suits your need*/ display: block; /* it's your call what the break point is */ @media screen and (max-width: 1440px) { display: none; } } .show-on-mobile { /* display can be inline-block, just choose one that suits your need*/ display: none; /* it's your call what the break point is */ @media screen and (max-width: 411px) { display: block; } } 

 <div class="show-on-desktop" style="background-image: url('img-desktop.jpg');" data-stellar-background-ratio="0.5"></div> <div class="show-on-mobile" style="background-image: url('img-mobile.jpg');" data-stellar-background-ratio="0.5"></div> 

Answer 3

There are multiple ways to target this problem. media queries will be the most reliable one.

But you can also try using the picture tag of html5 like:

 <picture>
   <source 
      media="(min-width: 650px)"
      srcset="images/img1.png">
   <source 
      media="(min-width: 465px)"
      srcset="images/img2.png">
   <img src="images/img-default.png" 
   alt="">
</picture>