Установить размер на фоновое изображение с помощью CSS?

Question

Можно ли установить размер фонового изображения с помощью CSS?

Я хочу сделать что-то вроде:

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

Но, кажется, совершенно неправильно так делать ...

Answer 1

Вы написали

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.

Answer 2

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;

Answer 3

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

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

Answer 4

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

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

Answer 5

Это можно сделать в CSS3 с background-size

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

Answer 6

Например:
Фоновое изображение всегда будет соответствовать размеру контейнера (ширина 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;

}

Answer 7

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

Answer 8

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

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

#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 -->