Download the original background image of the appropriate size

Question

I need to create a wallpaper. So 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 upload a large background image (width of about 2000 pixels), but I think this solution is pretty bad, as mobile detectors also load this large image.

I tried loading the image added 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 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 an image element like this:

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

But actually this is not the background (for example, the first solution). Is it possible to adapt jquery-script to html-background-url? Or does anyone know a simpler solution?

I also want to download the image first (!), And after that the website will fade ... I think I need the .load () jQuery function for this; but I don't know how to do this in a script ...

Answer 1

Here is a more recent 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 link to it here http://css-tricks.com/perfect-full-page-background-image/

Answer 2

Use responsive design. i.e. only css 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 do not support CSS3 will show lg_image.png, so there is a graceful downgrade.

Answer 3

I am doing something similar with Javascript, but instead of loading to fit the screen, it loads a random image in the background every time the page is refreshed.

You do not need a tag or change its attr. You can use jQuery to change the CSS style in the body tag to load another parameter, or if you want to get away from overlaying style tags (and you should) just like me, you can just create a class for each background and apply a class for the body. to change the background through jQuery.

Answer 4

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 response.js, this will fix the problem with IE8 not supporting css3 media request, make sure you put a script tag for it after loading css.