Add an Id to a background-image inside a div

I am trying to add an id to a background image that is inside a div in order to have it fade in on load.

 <div class="thumbnail" style="background-image:url(images/bracelets/1/002.png,); width:356px; height:265px;"><a id="thumbnail-btn" href="images/bracelets/1/002a.png" rel="lightbox" title="my caption"></a></div>

This is what I have on my code and what I want to add an id to is the:

background-image:url(images/bracelets/1/002.png,) 

I have several background-images on the page that I want to fade in at the same time. Can anyone help me or tell me if its possible to add an id to it. Because this is the code I want to use to fade in.

document.write("<style type='text/css'>#thephoto {visibility:hidden;}</style>");

var images = [ "thephoto1", "thephoto2", "thephoto3" ];
function initImages() {
    for (var i = 0; i < images.length; i++) {
        imageId = images[i];
        image = document.getElementById(imageId);
        setOpacity(image, 0);
        image.style.visibility = "visible";
        fadeIn(imageId, 0);
    }
}
function fadeIn(objId,opacity) {
    if (document.getElementById) {
        obj = document.getElementById(objId);
        if (opacity <= 100) {
            setOpacity(obj, opacity);
            opacity += 10;
            window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
        }
    }
}
function setOpacity(obj, opacity) {
    opacity = (opacity == 100)?99.999:opacity;
    // IE/Win
    obj.style.filter = "alpha(opacity:"+opacity+")";
    // Safari<1.2, Konqueror
    obj.style.KHTML开发者_开发知识库Opacity = opacity/100;
    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()}
// -->
</script>

If anyone has a better idea of how to do it I would really appreciate it!

Thanks! S.

You can't put an id on a bg image. you ref it by the ID of the things it's the bg of. If you want to make this work it'll take some clever layout. Getting divs o sit on top of each other so you can have the top clear and the bottom one do the fade. And yes as farligOpptreden said, use jquery. Will make your life way easier.

You should consider using jQuery for setting the opacity. It takes care of all the cross-browser compatibility issues for you... There is a fade function available in jQuery as well, so you can just apply it to all "thumbnail" classed DIVs on the page.

An example might be as follows:

<script type="text/javascript">
$(document).ready(function(){
  $("div.thumbnail").fadeIn("slow",function(){
    // do something when the items have faded in
  });
});
</script>