Changing the background image according to resolution - javascript only

Question

there's a lot of this question scattered over stackoverflow, but I can't seem to find an answer that specifically suits my situation.

I have made a background in HD 1920x1080 for a school project I'm making, and I'm trying to make it fit for every resolution there is. So what I did was resizing this image for every specific resolution, putting me in an awkward spot to code it, as I cannot use jQuery, I'm not allowed to.

I'm thinking of using the screen.width property, but I'd need a length too as I have multiple backgrounds with the ...x768 resoulution.

Is there anyone who'd be able to tell me how to change my body's background, depending on the user's height and width of the screen?

Thank you very much,
Michiel

Answer 1

You may check the window width and change the background depending on the results.

var width = window.innerWidth;
var height = window.innerHeight;
var body = document.body;

if (width <= 1600 && height <= 1000) {
  body.style.background = "url(path/to/1600x1000.jpg)";
}
if (width <= 1400 && height <= 900) {
  body.style.background = "url(path/to/1400x900.jpg)";
}
// continue as desired

http://jsbin.com/wosaduho/1/

Even better, use some media queries to reduce javascript required.

@media screen and (max-width: 1600px) {
 .element {
   background: url(path/to/1600x1000.jpg);
 }
}
@media screen and (max-width: 1400px) {
 .element {
   background: url(path/to/1400x900.jpg);
 }
}

Answer 2

You can use window.innerWidth and window.innerHeight to get the current dimensions of your browser's window.

Which means that if your browser takes half of your 1920x1080 desktop, it'll compute to something like:

window.innerWidth ~= 540
window.innerHeight ~= 1920 // actually something smaller because it doesn't count your browser's chrome

Your window can of course change size, and if you want to handle that, you can listen to the event "resize" for your window:

window.addEventListener('resize', function () {
  // change background
});

To change the body's background without jQuery, you can do something like this:

document.body.style.backgroundImage = "url(/* url to your image...*/)";

To recap:

// when the window changes size
window.addEventListener('resize', function () {
  var windowWidth = window.innerWidth; // get the new window width
  var windowHeight = window.innerHeight; // get the new window height

  // use windowWidth and windowHeight here to decide what image to put as a background image
  var backgroundImageUrl = ...;

  // set the new background image
  document.body.style.backgroundImage = "url(" + backgroundImageUrl + ")"; 
});

I am not sure what browsers you are supposed to be compatible with. This should work in all latest versions of the big browsers.

Answer 3

body {
   background-image:  url(images/background.jpg);
   background-size:cover;/*If you put "contain" it will preserve its intrinsic aspect ratio*/      background-repeat: no-repeat;
}

Try this

Answer 4

You might want to trigger a function like the following on window load and/or on window resize:

function SwapImage(){
    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
        h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
        el = document.getElementById('change-my-background');

    // use conditionals to decide which image to show
    if(w < 1200 && h < 800){
        el.style.backgroundImage = "url('img_1200x800.png')";
    }

    if(w < 900 && h < 600){
        el.style.backgroundImage = "url('img_900x600.png')";
    }

    // etc...
}