CSS фоновое изображение и ширина рамки (%) - PullRequest
3 голосов
/ 01 февраля 2011

Мой макет использует процентные значения в полях. Например:

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

Это нормально, но когда макет увеличивается, фоновые изображения повторяются ... посмотрите на это изображение: http://img821.imageshack.us/img821/3503/cssbgandpercent.jpg

Есть ли способ, чтобы фоновое изображение соответствовало размеру коробки? Спасибо.

1 Ответ

4 голосов
/ 01 февраля 2011

Вы можете добавить no-repeat к фону, чтобы он прекратился раньше.

Вы можете добавить свойство CSS3 background-size: auto 100%;, чтобы растянуть фон до нужного размера.
ВыТакже следует добавить -moz-background-size и -webkit-background-size с тем же значением.

...