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

386

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

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

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

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

Johan
источник
Возможно это возможно. Смотрите Как: Изменение размера фонового изображения .
Рикардо де ла Вега

Ответы:

621

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ценность , которые дают нам новую силу контроля , что у нас не было раньше.

Круглый

Вы также можете использовать 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;
}

Это позволит отрегулировать ширину изображения, чтобы оно соответствовало целому числу раз в области расположения фона.


Дополнительное примечание
Если вам нужен статический размер пикселя, все равно разумно физически изменить размер фактического изображения. Это необходимо как для повышения качества изменения размера (учитывая, что программное обеспечение для обработки изображений работает лучше, чем для браузеров), так и для экономии полосы пропускания, если исходное изображение больше, чем то, что отображается.

трепет
источник
7
Обратите внимание, что существует также вопрос о дисплеях сетчатки на iPad и iPhone и, возможно, других устройствах с высоким разрешением. Это означает, что, возможно, стоит изменить размеры больших изображений, используя CSS, а также использовать несколько файлов CSS и другие приемы для обслуживания определенных изображений. Хорошее введение в это здесь: webmonkey.com/2012/03/…
Лев
На данный момент это худшее решение, так как не каждый интернет-магазин будет менять размер изображения в соответствии с предложением. В 2009 году он, скорее всего, был близок к лучшему варианту, теперь просто используйте атрибуты размера, как показано ниже.
ShaunOReilly
332

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

background-size: 200px 50px;

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

Maertz
источник
32
К сожалению, люди все еще используют ie8
Dean_Wilson
16
Позор Microsoft за его ужасный браузер
Mahmoodvcs
Окончание 2013 года, все еще нужно добавить background: url('resized_image.png')\9;для IE lt 9
skobaljic
Это путь даже в 2017 году!
Франциско Очоа
Я также пришел с 2017 года, и вот как мы это делаем.
Ска
23

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

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

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

Кристофер Токарь
источник
1
размер фона: 100%; фон положение: центр; - это работает в IE6, работающем на моей виртуальной машине на XP Home.
InnateDev
7
IE 6,7,8 не является «большинством браузеров».
Mahmoodvcs
1
Даже в 2013 году - хотя комментарий «IE6,7,8 не является« большинством браузеров »» может быть отчасти правдив в отношении IE6; К сожалению, IE7 и IE8 по-прежнему имеют довольно значительную долю рынка. Лучший способ сделать это - использовать Javascript в сочетании с modernizr (или другим способом пометки «OLDIE»).
AndrewPK
19

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

background-repeat: no-repeat;

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

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

background-position: center top;

или возможно

background-position: 20px -14px;

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

Mikl
источник
Нет, он не такой большой, как я. Это всегда один и тот же размер, но мне нужно сделать это больше.
Йохан
Ну, это невозможно. Могут быть варианты сделать это в будущих версиях CSS, но это далеко.
Микл
Этот ответ неверен. CSS3 имеет свойство background-size, которое поддерживается в IE9 +.
Downpour046
3
Посмотрите на отметку времени. В 2009 году размер фона был просто мерцанием в глазах WebKit. Не стесняйтесь обновлять его, если хотите, но уже есть множество других ответов, описывающих размер фона.
Микл
12

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

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

background-size: contain;

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

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

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

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

кайзер
источник
4

В поддержку ответа, который дал @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)

SunSPARC
источник
3

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

Mihai
источник
3

Вы полностью можете с 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/

Майк Синкула
источник
2

Просто имейте вложенные div для совместимости с разными браузерами

   
      <div>
         <div style="background: url('bg.gif') top repeat-y;min-width:490px;">
            Put content here
         </div>
      </div>
   
Корнелиус Лэмб
источник
2

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

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

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

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

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

Бен Шомер
источник
1

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

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

knittl
источник
1
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;
Shwetha SH
источник
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.

Карлос Калла
источник
0

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

Silversky
источник
0

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

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

#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 -->
Мартин Томпсон
источник
2
Другой способ - установить размер ссылки на размер фонового изображения. В таблице стилей (под # v2menu-home в приведенном выше примере) используйте display: block и установите там высоту и ширину. Это на самом деле работает. Нет необходимости в неразрывных пробелах.
Мартин Томпсон
0

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

}

skyrosbit
источник
0

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

.backgroungImage {
    background: url('../imageS/background.jpg') no-repeat;
    background-size: 32px 32px;
}
омкар хаде
источник
0

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

background:url(my-bg.png) no-repeat top center / 50px 50px;
Ратата Тата
источник
Я не могу проверить, но, вероятно,
Ратата Тата
Я думал, что ipads не распознает стенограмму фона @ orlando-leite
DGRFDSGN