How do I make the background image unchanged when scaling?

I would think it needs javascript to do this, because you need to figure out how big the viewport is by itself ... whenever that viewport changes, which cannot be detected by the css ... the javascript is in. in the javascript / jquery resize browser event. jQuery implements this very well with some examples at http://api.jquery.com/resize/ which you should use quite easily.

An example they give is adding a new body width when the window is resized ... which is the same trigger when the window is enlarged.

Take a look at the jsfiddle . First, I set the width of the new viewport. Then I also adjusted the window width and height relative to 1/5 of the viewport.

The magic code:

$(window).resize(function() {
    $('#log').append('<div>' + $(this).width() + '</div>');
});

      

        
        
        
      

    

and that will change the width:

if (logWidth == width/3) {
    console.log("hooray.");
}
else {
    console.log("resize the log please.");
    logWidth = width/3;
    $('#log').width(logWidth);
}

      

        
        
        
      

    

This if else statement can be modified to suit the needs of the background image.

This gives me a new width that I can use to set the background image / width / whatever element I want on any resize event.