Q:

Set background-image ID using JQuery

I want to have different backgrounds based on the users device size.  I have set the background-image using JQuery, no problem there.  Now I need to set the background-image's ID, and I can't seem to figure it out.
I need the ID set to bg for another script down below.
Please Help!
Thanks
var theDiv = document.getElementById("body");
 if (screen.width <= 1300) {
    $('body').css('background-image', 'url(images/jpg/SmallLeather.jpg)');}
else{
    $('body').css('background-image', 'url(images/jpg/BackGroundCon.jpg)');
    $('body').css('background-image', 'id (bg)');}
</script>  
<script>
$(window).load(function() {    
    var theWindow        = $(window),
    $bg              = $("#bg"),
    aspectRatio      = $bg.width() / $bg.height();
function resizeBg() {
    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
        $bg
            .removeClass()
            .addClass('bgheight');
    } else {
        $bg
            .removeClass()
            .addClass('bgwidth');
    }
}
theWindow.resize(resizeBg).trigger("resize");
});
</script>

A:

A background image doesn't have it's own id.  The object for which it is set as a background can have the id.  You can then get to the background image by finding the host object with that id and then setting the background image on that object.
If the object in question is the body, then you don't really need an id to retrieve that object since you can refer to it as document.body at any time.  There is built-in access to that object in javascript.
Also, you may be able to dynamically adjust the background image based on window size entirely with CSS (no javascript) by using CSS media queries.

