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.

Possible duplicate https://stackoverflow.com/questions/42025632/how-to-detect-only-with-css-mobile-screens — Bob Tate, Dec 21 '18 at 03:21
background-size: cover the background image and it will always fit. I use 'center center' for positioning most of the time too.This post might help you too: https://stackoverflow.com/questions/15930504/css-background-image-centered-with-stellar-js — Nathaniel Flick, Dec 21 '18 at 03:22
We tried the solution with media screen however now it shows 2 versions on mobile. its not really doing an 'if-then' type scenario. Also the class has to be inclusive of the "bg-img full-height parallax-content" because on desktop and tablet there is a parallax effect. This is not a duplicate post. I looked at the other questions and they just talk about media query, but not a total solution. If anyone can help please we appreciate it. — Viktor, Dec 21 '18 at 04:03

score 3 · Answer 1 · answered Dec 21 '18 at 03:25

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');
  }
}

score 2 · Answer 2 · answered Dec 21 '18 at 03:26

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>

is it possible to put a class inside of a class? i.e. for this image to display properly with PARALLAX it needs to be class="bg-img full-height parallax-content show-on-desktop" will that work? how do we assign which is !important? — Viktor, Dec 21 '18 at 03:44
you definitely can do that, I just gave a simple example for you. Just be careful about the `display` property on other classes. — He Wang, Dec 21 '18 at 04:14

score 1 · Answer 3 · answered Dec 21 '18 at 04:43

1

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>

answered Dec 21 '18 at 04:43

Divya Parashar

11
2

Be sure to check the browser support on this one. If you need to support any older browsers, this option is a no-go. https://caniuse.com/#search=Picture – Nate Dec 21 '18 at 04:46

css image swap mobile vs desktop using media query

3 Answers3