resize background image of div

Question

Hi, using a joomla component that pulls an image from the database for a slideshow.

It sets the image as the background of the div - I need to resize that image to be the width (620px) of the slideshow.

<div style="background: url({image1url}) top center no-repeat;
 width:620px;
 height:350px">
<div style="width:620px;
     height:256px;">
<a href="{url}">
    <img src="modules/mod_jxtc_ezrealtywall/images/10x10spacer.gif" width="620" height="246" alt="10x10spacer.gif" /></a>
</div>
<div style="position:relative; width:620px;
     height:104px;">

    <div style="position:absolute; width:620px; height:95px; background:#000; opacity:0.7; filter:alpha(opacity=70); "></div>

    <div style="position:absolute;">
        <div style="float:left;
             width:250px;
             border-right: 1px dotted #cccccc;
             color:#ebebeb;
             padding-right:30px;
             padding-left:20px;
             text-align:right;
             font-size:28px;
             letter-spacing:-1px;
             line-height:28px !important;
             margin-top:16px;
             font-weight:500;">
            {unitnum} {streetnum} {address} {locality} {postcode}
        </div>
        <div style="float:right;
             width:250px;
             color:#ebebeb;
             margin:23px 40px 5px 0px;
             padding-left:15px;
             text-align:left;
             font-size:11px;
             line-height:11px !important;">
            {description}
        </div>
    </div>
</div>

Answer 1

You can't resize a background image using CSS (unless you're using CSS 3 which is not fully implemented).

Answer 2

Jeepstone is right, it is supported by CSS 3 and is supported by most browsers except IE (joy) but I'm not sure about IE9? See http://www.css3.info/preview/background-size/ for more info, and below is an example - in this case by centering the background image I get a resizing background image, and IE users get a cropped image, which sometimes is good enough... maybe...

.backgroundImage {
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -khtml-background-size : 100% 100%;
    -moz-background-size: 100% 100%;
    background-position: center center;
}