Только CSS 3 поддерживает это,

background-size: 200px 50px;

Но я бы отредактировал сам образ, так что пользователю нужно будет загружать меньше, и он может выглядеть лучше, чем сжатое изображение без сглаживания.

Если ваши пользователи используют только Opera 9.5+, Safari 3+, Internet Explorer 9+ и Firefox 3.6+, тогда ответ будет да. В противном случае нет.

Свойство background-size является частью CSS 3, но оно не будет работать в большинстве браузеров.

Для ваших целей просто сделайте фактическое изображение более крупным.

Невозможно. Фон всегда будет настолько большим, насколько это возможно, но вы можете остановить его от повторения background-repeat.

background-repeat: no-repeat;

Во-вторых, фон не входит в область поля поля, поэтому, если вы хотите, чтобы фон был только на фактическом содержимом поля, вы можете использовать margin вместо заполнения.

В-третьих, вы можете контролировать, где начинается фоновое изображение. По умолчанию это верхний левый угол поля, но вы можете управлять этим с помощью background-position, например:

background-position: center top;

или, возможно,

background-position: 20px -14px;

Отрицательное позиционирование часто используется с CSS sprites.

Не слишком сложно, если вы не боитесь идти немного глубже:)

Есть один забытый аргумент:

background-size: contain;

Это не будет растягивать ваш background-image, как это было бы при использовании cover. Он растягивается до тех пор, пока более длинная сторона не достигнет ширины или высоты внешнего контейнера и, следовательно, сохранит изображение.

Изменить: Там также -webkit-background-size и -moz-background-size.

Свойство background-size поддерживается в IE9 +, Firefox 4+, Opera, Chrome и Safari 5 +.

^{- Источник: W3 Schools}

Вы можете полностью использовать CSS3:

body {
    background-image: url(images/bg-body.png); 
    background-size: 100%; /* size the background image at 100% like any responsive img tag */
    background-position: top center;
    background-repeat:no-repeat;
 }

Это позволит увеличить фоновое изображение до 100% от ширины элемента body и затем соответствующим образом изменить размер фона, поскольку размер элемента тела будет уменьшен для меньших разрешений.

Вот пример: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/

background-size: 200px 50px измените его на 100% 100% и он будет масштабироваться по потребностям тега контента, такого как ul li или div... попробовал его

В ответ на ответ, который дал @tetra, я хочу указать, что если изображение является SVG, то изменение размера фактического изображения не требуется.

Поскольку SVG файл - это просто XML, вы можете указать любой размер, который вы хотите, чтобы он отображался в XML.

Однако, если вы используете одно и то же изображение SVG в разных местах и ​​нуждаетесь в разных размерах, то использование background-size очень полезно. SVG файлы по своей сути меньше растровых изображений в любом случае, и изменение размера "на лету" с помощью CSS может быть очень полезно без каких-либо эксплуатационных затрат, о которых я знаю, и, конечно же, без потери качества.

Вот краткий пример:

<div class="hasBackgroundImage">content</div>

.hasBackgroundImage
{
    background: transparent url('/image/background.svg') no-repeat 10px 5px;
    background-size: 1.4em;
}

(Примечание: это работает для меня в OS X 10.7 с Firefox 8, Safari 5.1 и Chrome 16.0.912.63)

Вы можете использовать два элемента <div>:

• Один из них - это контейнер (это тот, который вы изначально хотели фоновое изображение для отображения).

• Второй находится внутри. Вы устанавливаете его размер в размере фоновое изображение (или размер, который вы хотите отображать).

Затем установленный div устанавливается в положение absolute. Таким образом, это не мешает нормальному потоку элементов в содержащем div.

Это позволяет эффективно использовать спрайт-изображения.

Просто вложенные divs должны быть совместимы с браузерами

   
      <div>
         <div style="background: url('bg.gif') top repeat-y;min-width:490px;">
            Put content here
         </div>
      </div>
   

Если вы хотите установить background-size в том же свойстве background, вы можете использовать:

background:url(my-bg.png) no-repeat top center / 50px 50px;

Вы написали

background: url('bg.gif') top repeat-y;    
background-size: 490px;

но вы будете видеть только фон в зависимости от размера контейнера.

если у вас есть пустой контейнер с фоном url и любым размером фона, вы не увидите bg.gif.

Если вы задаете размер континера

background: url('bg.gif') top repeat-y;    
background-size: 490px;
height: 490px;
width: 490px;

в сочетании с кодом, который вы написали выше, вы сможете увидеть файл bg.gif.

put the below code in the body of you css file

background-image: URL('../images/wave-green-plain-colour.jpg') ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100px;

Вы не можете установить размер фонового изображения с текущей версией CSS (2.1).

Вы можете установить только: position, fix, image-url, repeat-mode и color.

Это можно сделать в CSS3 с размером фона

.backgroungImage {
    background: url('../imageS/background.jpg') no-repeat;
    background-size: 32px 32px;
}

Например:
Фоновое изображение всегда будет соответствовать размеру контейнера (ширина 100% и высота 100 пикселей).
Кросс-браузерный CSS:

.app-header {
background: url("themes/default/images/background.jpg") no-repeat;
-moz-background-size: 100% 100px;
-webkit-background-size: 100% 100px;
-o-background-size: 100% 100px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "themes/default/images/background.jpg", sizingMethod = 'scale');
background-size: 100% 100px;

}

Я использую фоновые изображения для кнопок, но только показывает изображение того же размера, что и текст, даже если я задал ширину и высоту. Вместо этого я вычеркиваю свой текст символами   (неразрывные пробелы). В любом случае, я пощелкаю столько, сколько необходимо, пока не появится весь фон кнопки. Поэтому у меня может быть такой код:

В таблице стилей:

#v2menu-home {
    background-image:url(../v2-siteimages/button.png);
    background-repeat:no-repeat;
}

В документе HTML:

<div id="v2menu">
    <a id="v2menu-home" href="/index.php">home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
</div><!-- v2menu -->

background-size работает в Chrome 4.1, но до сих пор я не мог заставить его работать в Firefox 3.6.