Use 1 internal image for desktop and a different one for mobile?

Question

I have a in which I have defined it to have a background.svg graphic in css. Now I want to use background.svg for desktop screens and a different one named backgroundm.svg for mobile screens. Is this even possible like this through css or do I have to do it differently from what I'm trying to do ? Thanks!

.header {
  background-image: url(img/johnswork.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  margin-top: 10%;
  margin-bottom: 10%;
}

<!DOCTYPE html>

<html lang="en-US">

<head>>
</head>

<body>
  <nav class="navbar">
    <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
  </nav>

  <header class="header">

  </header>

  <section class="body">
    <section class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac ipsum non diam faucibus dignissim. Praesent a dolor tincidunt, rutrum diam ut, convallis orci.
    </section>
  </section>

  <footer class="footer" id="copyright" style="text-align:center">
    <div id="cpy">&copy; DA COSTA JOAO (2019)</div>
  </footer>

</body>

</html>

score 0 · Answer 1 · answered Feb 28 '19 at 01:12

Use the @media tag to change the image source depending on the screen width. When it comes to page responsiveness (especially for mobile), it is generally considered best practice to avoid using JavaScript when possible.

.header {
  background-image: url(img/johnswork.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  margin-top: 10%;
  margin-bottom: 10%;
}

@media (min-width: 600px){
  .header {
    background-image: url(img/johnswork.svg);
  }
}

For more information, check out https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

On the mobile if you scroll down then up then down again there's like a white space.. anyway to remove this ? — , Feb 28 '19 at 01:34

score 0 · Accepted Answer · answered Feb 28 '19 at 01:17

You can use media queries to "detect" the dimensions of a mobile and then display the new image:

.header {
  background-image: url("img/johnswork.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  margin-top: 10%;
  margin-bottom: 10%;
}

@media (max-width: 768px) { /* when screen size is < 768px apply the following styles */
  .header {
    background-image: url("img/johnswork-mobile.svg");
  }
}

The media query:

@media (max-width: 768px) {

}

will apply the styles within it when the screen size is less than 768px. Thus, it's not the best approach to detect mobile screen sizes. You can find a concise list of media queries for detecting particular devices here.

Alternatively, you could use javascript to do user agent sniffing, allowing you to detect if the end-user is using a mobile. (this isn't a recommended approach):

function isMobile() {
  var check = false;
  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
};

window.addEventListener('DOMContentLoaded', function() { // when DOM has loaded
  if(isMobile()) { // Check if UA is mobile, if it is, then:
    [...document.getElementsByClassName("header")].forEach(elem => { // get all elements with the class "header" and loop through them, at each iteration:
      elem.style.backgroundImage = "url('img/johnswork-mobile.svg')";  // change the elements background image style
    })
  }
});

Credit to this answer for mobile detection function.

@DacJo213 probably 1st method, but if you do that the image will change when you shrink the screen size (which isn't necessarily a bad thing). Using JS is another approach which will only change the image on a mobile device. However, using JS to detect the device isn't really recommended, thus I think the first method is the better way to go — Nick Parsons, Feb 28 '19 at 01:36
Is it also possible to use different css for mobile ?? How?? Thanks in advance! — , Feb 28 '19 at 01:44
You can use media queries like I have above. Or you can see [this answer](https://stackoverflow.com/a/13375361/5648954) which explains what your after in more detail. — Nick Parsons, Feb 28 '19 at 01:50

Use 1 internal image for desktop and a different one for mobile?

2 Answers2