Можно ли установить размер фонового изображения с помощью CSS?
Я хочу сделать что-то вроде:
background: url('bg.gif') top repeat-y;
background-size: 490px;
Но, кажется, совершенно неправильно делать это так...
Установить размер на фоновое изображение с помощью CSS?
Ответ 1
CSS2
Если вам нужно увеличить изображение, вы должны отредактировать изображение в редакторе изображений.
Если вы используете тег img, вы можете изменить размер, но это не даст вам желаемого результата, если вам нужно, чтобы изображение было фоном для какого-либо другого контента (и оно не повторится, как вам кажется)...
CSS3 развязывает полномочия
Это можно сделать в CSS3 с background-size.
Все современные браузеры поддерживают это, поэтому, если вам не нужно поддерживать старые браузеры, это способ сделать это.
Поддерживаемые браузеры:
Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) и Chrome 3.0+.
.stretch{
/* Will stretch to specified width/height */
background-size: 200px 150px;
}
.stretch-content{
/* Will stretch to width/height of element */
background-size: 100% 100%;
}
.resize-width{
/* width: 150px, height: auto to retain aspect ratio */
background-size: 150px Auto;
}
.resize-height{
/* height: 150px, width: auto to retain aspect ratio */
background-size: Auto 150px;
}
.resize-fill-and-clip{
/* Resize to fill and retain aspect ratio.
Will cause clipping if aspect ratio of box is different from image. */
background-size: cover;
}
.resize-best-fit{
/* Resize to best fit and retain aspect ratio.
Will cause gap if aspect ratio of box is different from image. */
background-size: contain;
}
В частности, мне нравятся значения cover и contain, которые дают нам новую силу контроля, которой у нас раньше не было.
Round
Вы также можете использовать background-size: round, которые имеют значение в сочетании с повторением:
.resize-best-fit-in-repeat{
/* Resize to best fit in a whole number of times in x-direction */
background-size: round auto; /* Height: auto is to keep aspect ratio */
background-repeat: repeat;
}
Это позволит отрегулировать ширину изображения так, чтобы она находилась в области фонового позиционирования целых раз.
Дополнительное примечание Если вам нужен размер статического пикселя, он по-прежнему умный, чтобы физически изменить размер фактического изображения. Это также улучшает качество изменения размера (при условии, что ваше графическое программное обеспечение выполняет лучшую работу, чем браузеры), и для экономии полосы пропускания, если исходное изображение больше, чем показано.
Ответ 2
Только CSS 3 поддерживает это,
background-size: 200px 50px;
Но я бы отредактировал сам образ, так что пользователю нужно будет загружать меньше, и он может выглядеть лучше, чем сжатое изображение без сглаживания.
Ответ 3
Если ваши пользователи используют только Opera 9.5+, Safari 3+, Internet Explorer 9+ и Firefox 3.6+, тогда ответ будет да. В противном случае нет.
Свойство background-size является частью CSS 3, но оно не будет работать в большинстве браузеров.
Для ваших целей просто сделайте фактическое изображение более крупным.
Ответ 4
Невозможно. Фон всегда будет настолько большим, насколько это возможно, но вы можете остановить его от повторения background-repeat.
background-repeat: no-repeat;
Во-вторых, фон не входит в область поля поля, поэтому, если вы хотите, чтобы фон был только на фактическом содержимом поля, вы можете использовать margin вместо заполнения.
В-третьих, вы можете контролировать, где начинается фоновое изображение. По умолчанию это верхний левый угол поля, но вы можете управлять этим с помощью background-position, например:
background-position: center top;
или, возможно,
background-position: 20px -14px;
Отрицательное позиционирование часто используется с CSS sprites.
Ответ 5
Не слишком сложно, если вы не боитесь идти немного глубже:)
Есть один забытый аргумент:
background-size: contain;
Это не будет растягивать ваш background-image, как это было бы при использовании cover. Он растягивается до тех пор, пока более длинная сторона не достигнет ширины или высоты внешнего контейнера и, следовательно, сохранит изображение.
Изменить: Там также -webkit-background-size и -moz-background-size.
Свойство background-size поддерживается в IE9 +, Firefox 4+, Opera, Chrome и Safari 5 +.
Ответ 6
background-size: 200px 50px измените его на 100% 100% и он будет масштабироваться по потребностям тега контента, такого как ul li или div... попробовал его
Ответ 7
Вы можете полностью использовать 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/
Ответ 8
Просто вложенные divs должны быть совместимы с браузерами
<div>
<div style="background: url('bg.gif') top repeat-y;min-width:490px;">
Put content here
</div>
</div>
Ответ 9
Вы можете использовать два элемента <div>:
-
Один из них - это контейнер (это тот, который вы изначально хотели фоновое изображение для отображения).
-
Второй находится внутри. Вы устанавливаете его размер в размере фоновое изображение (или размер, который вы хотите отображать).
Затем установленный div устанавливается в положение absolute. Таким образом, это не мешает нормальному потоку элементов в содержащем div.
Это позволяет эффективно использовать спрайт-изображения.
Ответ 10
В ответ на ответ, который дал @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)
Ответ 11
Вы не можете установить размер фонового изображения с текущей версией CSS (2.1).
Вы можете установить только: position, fix, image-url, repeat-mode и color.
Ответ 12
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;
Ответ 13
Вы написали
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.
Ответ 14
Если вы хотите установить background-size в том же свойстве background, вы можете использовать:
background:url(my-bg.png) no-repeat top center / 50px 50px;
Ответ 15
background-size работает в Chrome 4.1, но до сих пор я не мог заставить его работать в Firefox 3.6.
Ответ 16
Я использую фоновые изображения для кнопок, но только показывает изображение того же размера, что и текст, даже если я задал ширину и высоту. Вместо этого я вычеркиваю свой текст символами (неразрывные пробелы). В любом случае, я пощелкаю столько, сколько необходимо, пока не появится весь фон кнопки. Поэтому у меня может быть такой код:
В таблице стилей:
#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 </a>
</div><!-- v2menu -->
Ответ 17
Например:
Фоновое изображение всегда будет соответствовать размеру контейнера (ширина 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;
}
Ответ 18
Это можно сделать в CSS3 с размером фона
.backgroungImage {
background: url('../imageS/background.jpg') no-repeat;
background-size: 32px 32px;
}