使用jQuery或Javascript-定位图像，然后将其设置为div的背景图像

Question

I had an idea today, and I was wondering if it was possible to do, and if I could get any pointers on how to accomplish it.

I own an e commerce website that dynamically loads a product's image upon page load. Here's the basic html structure for the image when it is loaded on the page:

<div id="container">
<table>
<tr>
    <td>
        <a id="product_photo_zoom_url" herf="#">
            <img id="product_photo" />
        </a>
    </td>
</table>
</tr>
</div>

My idea is this: I would like to use a script to target the image #product_photo. This script would then set that targeted image as a background image for the div #container.

I would then need to be able to set the following css for that dynamically added background image within the div #container in the script as well:

#container {background-size: 100% auto; background-position: center top; opacity: 0.1;}

Hopefully that made sense. Is this at all possible?

Thanks guys - Much appreciated.

Answer 1

var image = $("#product_phoro").attr('src');
$("#container").css('background-image', image);