CODEWITHSUNDEEP
htmlcssbackground-image
thom
thom

Reputation: 33

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.us/img821/3503/cssbgandpercent.jpg

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

Upvotes: 3

Views: 2877

Answers (1)

SLaks
SLaks

Reputation: 888283

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.

Upvotes: 4

Related Questions