Можно ли установить размер фонового изображения с помощью CSS?
Я хочу сделать что-то вроде:
background: url('bg.gif') top repeat-y;
background-size: 490px;Но, кажется, совершенно неправильно делать это так ...
Ответы:
Если вам нужно увеличить изображение, вы должны отредактировать само изображение в редакторе изображений.
Если вы используете тег img, вы можете изменить размер, но это не даст желаемого результата, если вам нужно, чтобы изображение было фоном для какого-то другого контента (и оно не будет повторяться, как вы, кажется, хотите) ...
Это можно сделать в 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ценность , которые дают нам новую силу контроля , что у нас не было раньше.
Вы также можете использовать background-size: roundэто значение в сочетании с repeat:
.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;
}Это позволит отрегулировать ширину изображения, чтобы оно соответствовало целому числу раз в области расположения фона.
Дополнительное примечание
Если вам нужен статический размер пикселя, все равно разумно физически изменить размер фактического изображения. Это необходимо как для повышения качества изменения размера (учитывая, что программное обеспечение для обработки изображений работает лучше, чем для браузеров), так и для экономии полосы пропускания, если исходное изображение больше, чем то, что отображается.
Это поддерживает только CSS 3,
background-size: 200px 50px;Но я бы отредактировал само изображение, так что пользователю нужно меньше загружать, и оно могло бы выглядеть лучше, чем уменьшенное изображение без сглаживания.
background: url('resized_image.png')\9;для IE lt 9
Если ваши пользователи используют только Opera 9.5+, Safari 3+, Internet Explorer 9+ и Firefox 3.6+, тогда ответ - да. В противном случае нет.
Свойство background-size является частью CSS 3, но оно не будет работать в большинстве браузеров.
Для ваших целей просто увеличьте фактическое изображение.
Не возможно . Фон всегда будет настолько большим, насколько это возможно, но вы можете остановить его повторение с помощью background-repeat.
background-repeat: no-repeat;Во-вторых, фон не входит в область поля поля, поэтому, если вы хотите, чтобы фон был только для фактического содержимого блока, вы можете использовать поле вместо отступа.
В-третьих, вы можете контролировать, где начинается фоновое изображение. По умолчанию это верхний левый угол поля, но вы можете управлять этим с помощью background-position, как это:
background-position: center top;или возможно
background-position: 20px -14px;Отрицательное позиционирование часто используется со спрайтами CSS .
Есть один забытый аргумент:
background-size: contain;Это не растянет вас, background-imageкак это было бы с cover. Он будет растягиваться, пока более длинная сторона не достигнет ширины или высоты внешнего контейнера и, следовательно, сохранит изображение.
Изменить: Там также -webkit-background-sizeи -moz-background-size.
Свойство background-size поддерживается в IE9 +, Firefox 4+, Opera, Chrome и Safari 5+.
В поддержку ответа, который дал @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)
Вы полностью можете с 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, а затем соответствующим образом изменить размер фона при изменении размеров элемента body для меньших разрешений.
Вот пример: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/
Просто имейте вложенные div для совместимости с разными браузерами
<div>
<div style="background: url('bg.gif') top repeat-y;min-width:490px;">
Put content here
</div>
</div>
Вы можете использовать два <div>элемента:
Один из них - контейнер (это тот, в котором вы изначально хотели, чтобы фоновое изображение появлялось).
Второй содержится внутри. Вы устанавливаете его размер на размер фонового изображения (или размер, который вы хотите отображать).
Содержащийся div затем устанавливается для позиционирования absolute. Таким образом, это не мешает нормальному потоку элементов в содержащем div.
Это позволяет эффективно использовать спрайт-изображения.
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;Ты написал
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.
Я использую фоновые изображения для кнопок, но он показывает только изображение того же размера, что и текст, даже если я установил ширину и высоту. Вместо этого я дополняю свой текст символами (неразрывные пробелы). В основном, я добавляю столько, сколько нужно, пока не появится весь фон кнопки. Так что я мог бы иметь такой код:
В таблице стилей:
#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 -->Например:
фоновое изображение всегда будет соответствовать размеру контейнера (ширина 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;}
Это можно сделать в CSS3 с background-size
.backgroungImage {
background: url('../imageS/background.jpg') no-repeat;
background-size: 32px 32px;
}Если вы хотите установить background-sizeодно и то же backgroundсвойство, вы можете использовать use:
background:url(my-bg.png) no-repeat top center / 50px 50px;