Question

I am using the HTML IMG tag to source/link an image and I want to center it in a div, but I am not having much success.

My html is:

     <div class="alimgholder">
<img  title="<?php echo $album_title;?>" alt="<?php echo $album_title;?>" src="<?php echo $album_pic;?>">
     </div>   

My css is:

              .alimgholder
             {
             width:160px;
             height:120px;
             overflow:hidden;
             float:left;
             }
             .alimgholder img
             {

             background-color: #EEEEEE;
             background-position: center 25%;
             background-repeat: no-repeat;
             display: block;
             }

Answer 1

set the css for the div only –

.alimgholder
         {
         width:160px;
         height:120px;
         overflow:hidden;
         float:left;
         background-image: url(path/to/your_image);
         background-color: #EEEEEE;
         background-position: center 25%;
         background-repeat: no-repeat;
         display: block;
         }        

Now for the dynamic issue – you can use the img tag to load the image, but hide it and read its src only to set the background with jQuery, like that –

 $("#div_id").css("background-image", $("#img_id").attr("src"));