Load an appropriately sized fullpage background image

Question

I need to create a fullpage background. Therefore this would work:

html { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

So I would load a big background-image (around 2000px width), but I think this solution is quite bad as i.e. mobile diveces would also load this big image.

I tried to load the image appending to the screen size:

jQuery(document).ready(function($) {    
    var win = $(window);

    win.resize(function() {

        var win_w = win.width(),
            win_h = win.height(),
            $bg    = $("#bg");

        // Load narrowest background image based on 
        // viewport width, but never load anything narrower 
        // that what's already loaded if anything.
        var available = [
            1024, 1280, 1366,
            1400, 1680, 1920,
            2560, 3840, 4860
        ];

        var current = $bg.attr('src').match(/([0-9]+)/) ? RegExp.$1 : null;

        if (!current || ((current < win_w) && (current < available[available.length - 1]))) {
            var chosen = available[available.length - 1];
            for (var i=0; i<available.length; i++) {
                if (available[i] >= win_w) {
                    chosen = available[i];
                    break;
                }
            }
            // Set the new image
            $bg.attr('src', '/images/bg/' + chosen + '.jpg');
        }

        // Determine whether width or height should be 100%
        if ((win_w / win_h) < ($bg.width() / $bg.height())) {
            $bg.css({height: '100%', width: 'auto'});
        } else {
            $bg.css({width: '100%', height: 'auto'});
        }
    }).resize();
});

So I need a image-element like this:

<img id="bg" src="" style="position: fixed; left: 0; top: 0" />

But this isn't really a background (like the first solution). Is it possible to adapt the jquery-script to the html-background-url? Or does anyone know a more simple solution?

I also want to load the image first (!) and after that fade the website in... I guess I need the .load()-function of jQuery for that; but I don't know how to put this in the script...

Answer 1

Use responsive design. i.e. css-only solution:

body {
    background-image: url("lg_image.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

@media (max-width: 767px) {
  body {
      background-image: url("xs_image.png");
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  body {
      background-image: url("sm_image.png");
  }
}

@media (min-width: 993px) and (max-width: 1200px) {
  body {
      background-image: url("lg_image.png");
  }
}

@media (min-width: 1201px) {
  body {
      background-image: url("xl_image.png");
  }
}

Browsers that don't support CSS3 will show lg_image.png so there is a graceful downgrade.

Answer 2

Here is a more up-to-date media query with filters

@media screen and (max-width:1024px){

    img { 
          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.largeImage.png', sizingMethod='scale');
          -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='largeImage.png', sizingMethod='scale')";
          background: url(images/largerImage.jpg) no-repeat center center fixed; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
    }
}

@media screen and (max-width:1140px){

    img { 
          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.largerImage.png', sizingMethod='scale');
          -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='largerImage.png', sizingMethod='scale')";
          background: url(images/largerImage.jpg) no-repeat center center fixed; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
    }
}

You can find a reference to it here http://css-tricks.com/perfect-full-page-background-image/