CSS background image and window width (%)

Question

My layout uses percentages. For instance:

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

This is normal, but when the layout is enlarged, the background images are repeated ... look at this image: http://img821.imageshack.us/img821/3503/cssbgandpercent.jpg

Is there a way to make a background image the size of a field? Thank.

Answer 1

You can add no-repeatto the background to stop it earlier.

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