CODEWITHSUNDEEP
jquerycss
user3142695
user3142695

Reputation: 17322

Load an appropriately sized fullpage background image

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...

Upvotes: 6

Views: 623

Answers (4)

Jesse
Jesse

Reputation: 825

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/

Upvotes: 1

Yoni Baciu
Yoni Baciu

Reputation: 2707

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.

Upvotes: 2

Jesse
Jesse

Reputation: 825

You can use something like this 

$(document).ready(function(){

    var sWidth = screen.availWidth;
    var sHeight = screen.availHeight;

    if(sWidth > 1024){

        $("img").attr("src", "largeImage.png");

    } else if(sWidth > 1140){

        $("img").attr("src", "largerImage.png");

    }
    //and so on

})

Alternatively you can use css3 media Queries, 

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

        img { background-image:url(largImage.png); }

    }

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

        img { background-image:url(largerImage.png); }

    }
</style>

if you need to support IE8 use respond.js it will fix issue with IE8 not supporting the css3 media query make sure you place the script tag for it after the css is loaded.

Upvotes: 0

Mark
Mark

Reputation: 861

I do something like this with Javascript, but instead of loading based on screen size it is loading a random image int he background everytime the page is refreshed.

You do not need an tag, or to change it's attr. You can use jQuery to change the CSS style on the body tag to load a different setting, or if you want to get away from inlining style tags (and you should) as I did, you can simply create a class for each background and apply the class to the body to change the background via jQuery.

Upvotes: 0

Related Questions