Auto-sizing body background image to browser window?

Question

i have a jquery script that allows for changing the body background

i want to have the background image of the body scaled to the browser window size there is a script called http://www.buildinternet.com/project/supersized/ but i am not able to make use of the scaling from that script because it effects the class img not the background-img

any ideas

<script type="text/javascript">
$(document).ready(function() { 
$("#BGSelector a").click(function() {
   var imgLink = $("img", this).attr("src");
   $.cookie("html_img", "" + imgLink + "", { path: '', expires: 7 });
   var imgCookieLink = $.cookie("html_img");       
   $("body").css("background", "url('" + imgCookieLink + "') no-repeat fixed center top #343837"); 

}); 
});
</script>

<script type="text/javascript">
$(document).ready(function() {   
       var imgCookieLink = $.cookie("html_img");  
       $("body").css("background", "url('" + imgCookieLink + "') no-repeat fixed center top #343837");

 });

</script>

Answer 1

Hi,

If I were you I would append the img into the DOM. Then set it to be absolutely positioned and set it's width according to client's width. Make sure everything else has a higher z-index and your img the lowest.

Answer 2

You won't be able to do this cross-browser until the advanced background properties in CSS3 come more into play in the browser universe. The closest way is what Ali has already specified.

If it's only IE you care about then you could try their proprietary AlphaImageLoader CSS filter, e.g.

#myDiv { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/workshop/graphics/earglobe.gif', sizingMethod='scale'); }

Please note though that this will play havoc when people try to click links with the filter loaded on a background - you won't be able to click the links until you implement some form of workaround (there's a few out there).

Answer 3

There is another route you can go down which slightly goes against the separation of concerns ideology however it is feasible.

I know that there is an Images component assembly or alike assemblies exist which you can import into your project if your site is written in .net and almost certain (but don't have personal experience) that these assemblies must exist for any other platform you use for your back end.

So you can use of these to recompose the image according to the clients screen size and then either use back end code or js to set this image as a background image for an element. But as jason has mentioned doing this easy peasy would require you to wait for microsoft folks to find a commercial use in adopting the new css3 rules and then the rest of the market can also follow.

Answer 4

Have you thought about using the canvas? Ok, I must admit barely know anything about using the canvas (I just started learning it) and my example below is probably done completely wrong, but it works (with FF & Chrome, not IE). It even resizes with the browser.

<canvas id="myCanvas" style="width:100%;height:100%;position:absolute;left:0px;top:0px;;z-index:-1;"></canvas>
<script type="text/javascript">
var elem = document.getElementById('myCanvas');
var context = elem.getContext('2d');
var w = document.body.clientWidth;
var h = document.body.clientHeight;
img = new Image();
img.src='bg.jpg';
img.onload = function () {
 context.drawImage(this,0,0,300,150);
};
</script>

Note the drawImage size must be 300x150 in this example as that is the default canvas size