Different background image depending on screen res

Question

what do you think is the best way to handle background images on different screen resolutions?

I was thinking of making a separate background for each of the most popular resolutions and just have Jquery load the appropriate one. I am open to CSS as well, thank you everyone :)

Answer 1

There's a jQuery plugin called "backstretch" which was made stretch the background image to fit the webpage's size. Just take a look here

---

If you just want to get the screen resolution then decide which background will be loaded, then these code may help:

var h = screen.height;
var w = screen.width;

var BGList = {
    '1024-768': 'background-url-1.jpg',
    '1152-864': 'background-url-2.jpg',
    '1280-600': 'background-url-3.jpg'
}

var myBG = BGList[ w+'-'+h ];
if (myBG){
    document.write("<style> body {background:url('"+myBG+"')} </style>")
}else{
    alert("You have a strange screeen !") //--deal with undefined screen resolution here
}

Answer 2

Update:

For cross browser support, my answer below is the "roll your own" method. Over the last couple years, however, there have been some excellent polyfills developed to solve this issue. It's usually a good idea to go with one of these rather than redoing all that work. Respond.js is one of the better known ones. Just link to it:

<script src="/path/to/respond.js"></script>

Then write your media queries in your css file and you're done.

---

As robertc pointed out, css media queries should be your starting point, but it should be noted that they are not a complete solution to this problem. Unfortunately, css media queries are not supported across all browsers (cough IE). The media query code in your css files will simply be ignored by these browsers.

In addition to css media queries, I would consider having a backup javascript solution that will determine the viewport size, then simply add a class to the body tag. This example uses jquery simply for the sake of brevity:

function setImageClass() {
    switch(true) {
        case($(window).width()>600): $("body").removeClass("w200 w400").addClass("w600");
        break;
        case($(window).width()>400): $("body").removeClass("w200 w600").addClass("w400");
        break;
        default: $("body").removeClass("w400 w600").addClass("w200");
        break;
    }
}

$(document).ready(function() {
    setImageClass();
});

$(window).resize(function() {
    setImageClass();
});

Btw, these sizes are not realistic, simply for easy testing on all devices. Remember, the css media queries will be ignored, so in addition to those, you need to set up the rules for the classes that the javascript sets:

.w200 { background:red }
.w400 { background:orange }
.w600 { background:yellow }

However, you don't want the 2 css rules colliding when both the queries and the js work, so your media queries should use the same names (and be placed afterwards). Eg:

@media (min-width:200px) {
    .w200 {
        background:red;
    }
}
...

I put up a fiddle to show this in action. This only includes the javascript solution, but again, I fully support media queries as the main solution. Here is the full screen link.

Answer 3

A slightly different approach with just css/inline backgroundImage. https://codepen.io/ajagad/full/dgVQoE

html,
body,
div,
section {
  width: 100%;
  height: 100%;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10vw;
}

.desktop,
.tablet {
  background-size: 0;
  background-repeat: no-repeat;
}

.mobile {
  background-size: auto;
  background-repeat: repeat;
}

@media screen and (min-width: 768px) {
  .desktop,
  .mobile {
    background-size: 0;
    background-repeat: no-repeat;
  }
  .tablet {
    background-size: auto;
    background-repeat: repeat;
  }
}

@media screen and (min-width: 1153px) {
  .mobile,
  .tablet {
    background-size: 0;
    background-repeat: no-repeat;
  }
  .desktop {
    background-size: auto;
    background-repeat: repeat;
  }
}

<div class="desktop" style="background-image:url(https://images.unsplash.com/photo-1539416090763-b4a25738b8b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9203d7004b743c877c085d1ab5e5e666&auto=format&fit=crop&w=1024&q=20)">
  <div class="tablet" style="background-image:url(https://images.unsplash.com/photo-1539495090708-ac6b6e8f4189?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=fcd5125a6fb31fbf5676df78447626a0&auto=format&fit=crop&w=768&q=20)">
    <div class="mobile" style="background-image:url(https://images.unsplash.com/photo-1539453198476-931a0137f0d7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=27b5e72e4429c085796630e2bcfcfa18&auto=format&fit=crop&w=480&q=20)">
      <section>Hello World</section>
    </div>
  </div>
</div>

Answer 4

Use media queries:

@media (min-width:800px) { background-image: url(bg-800.jpg) }
@media (min-width:1024px) { background-image: url(bg-1024.jpg) }
@media (min-width:1280px) { background-image: url(bg-1280.jpg) }

You're never going to be able to cover every single possible size, especially when you consider all those users whose browsers aren't full screen, so your design should be somewhat flexible to account for this.