Different background image depending on screen resolution?

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

I was thinking of making a separ开发者_Python百科ate 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 :)

---

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.

---

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.

---

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
}

---

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>

---

my call would be to stack div layers with different backgrounds you plan to use in different conditions and switch between them at breakpoints using display classes. please take care of styling necessary to place these overlayed on each other yourself; that's not the scope of the question.

<div id="content-box">
 yada yada
 <div id="bg-small-mobile" class="d-block d-sm-none"></div>
 <div id="bg-mobile" class="d-none d-sm-block d-md-none"></div>
 <div id="tablet" class="d-none d-lg-block d-xl-none"></div>
 <div id="laptop" class="d-none d-xl-block d-xxl-none"></div>
 <div id="desktop-hd" class="d-none d-xxl-block"></div>
 <div id="all-print" class="d-none d-print-block"></div>
</div>

use IDs to set the background images and other fine tuning for each layer I don't know if that's what you were looking for, but I figured I'd put it out there so you can use it when it is called for.

the code above is not verified typo-free or otherwise error-free, but only to illustrate the concept. Yes, I'm that lazy.