CSS background image and box width (%)

My layout uses percent values in the boxes. For example:

h2#news {
    background: url('../images/news-background.jpg');
    color: #fff;
    padding: 8px 20px;
    width: 90%;
    -moz-border-radius: 20px;
}

It's ok, but when layout increases, background images repeat... look at this image: http://img821.imageshack.开发者_如何学Pythonus/img821/3503/cssbgandpercent.jpg

Is there a way to background image follow the size of the box? Thank you.

You can add no-repeat to the background to make it stop early.

You can add the CSS3 property background-size: auto 100%; to stretch the background to fit.
You should also add -moz-background-size and -webkit-background-size, with the same value.