Background image css размер: background-size — CSS | MDN

Leave a Comment / Css / By /

Содержание

Как изменить размер фоновой картинки через CSS3

Оригинал: sitepoint.com/css3-background-size-property

Перевод: Влад Мержевич

В CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняет свои фиксированные размеры. К счастью, в CSS3 введено свойство background-size, с помощью которого фон может быть растянут или сжат. Оно идеально подходит, если вы создаёте шаблон для адаптивного веб-дизайна.

Есть несколько способов определения размеров — взгляните на демонстрационную страницу background-size.

Абсолютное изменение размера

Могут применяться единицы измерения.

background-size: ширина высота;

По умолчанию ширина и высота установлена как auto, что оставляет исходные размеры изображения.

Вы можете задать новый размер изображения с помощью абсолютных единиц измерения, таких как px, em, cm и др. Пропорции изменятся, если это необходимо. Например, если наша фоновая картинка имеет размеры 200×200 пикселов, то следующий код оставит эту высоту, но сделает ширину в два раза меньше:

background-size: 100px 200px;

Если указано только одно значение, оно считается шириной. Высота устанавливается как auto и сохраняются пропорции:

background-size: 100px;
  /* аналогично */
background-size: 100px auto;

Данный код масштабирует изображение с 200×200 до 100×100 пикселов.

Относительное изменение размера через проценты

Если применяются проценты, размеры основываются на элементе, а НЕ изображении:

background-size: 50% auto;

Ширина фонового изображения, таким образом, зависит от размеров контейнера. Если у контейнера ширина 500px, то размер нашего изображения уменьшится до 250×250.

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

Масштабирование до максимального размера

Свойство background-size также понимает ключевое слово contain. Оно масштабирует изображение таким образом, чтобы оно заполняло контейнер. Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но ширина и высота не будут превышать размеры контейнера:

background-size: contain;

Заполнение фоном

Свойство background-size также понимает ключевое слово cover. Изображение будет масштабироваться так, чтобы заполнить весь контейнер, но если различаются соотношения сторон, то картинка будет обрезана.

background-size: cover;

Масштабирование нескольких фонов

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

background:
  url("sheep.png") 60% 90% no-repeat,
  url("sheep.png") 40% 50% no-repeat,
  url("sheep.png") 10% 20% no-repeat #393;
  background-size: 240px 210px, auto, 150px;

Работа в браузерах

Последние версии всех браузеров поддерживают background-size без префиксов.

IE8 и ниже не поддерживают это свойство. Вы можете использовать фильтр IE для эмуляции значений content и cover, но невозможно изменить размер фоновой картинки без помощи уловок, вроде добавления настоящей картинки позади других элементов. Это грязно, так что я рекомендую изящную деградацию.

Просмотр демонстрационной страницы с background-size.

CSS3фон

CSS по теме

  • background-size

Статьи по теме

  • Как изменить размер фоновой картинки через CSS3
  • Как растянуть фон на всю ширину окна?
  • Масштабирование фона

CSS background-size | TuHub

Общие сведения

Фоновое изображение может быть настроено таким образом чтобы полностью покрывать всю область элемента или иметь заданные автором размеры.

У некоторых изображений (<image>), таких как, например, JPEG, есть встроенные размеры и пропорции, а у других изображений, таких как градиенты (<gradient>) нет встроенных размеров и пропорций и они занимают всю фоновую область, если не указано иное. Окончательный размер фонового изображения формируется на основе того есть ли у фонового изображения внутренние размеры и пропорции.

Свойство background-size принимает либо ключевое слово (cover или contain), либо пару не ключевых слов (<length> | <percentage>), либо не ключевое слово и значение auto.

Например:

background-size: cover;       /* ключевое слово */
background-size: contain;     /* ключевое слово */
background-size: 100% 50%;    /* пара значений из не ключевых слов */
background-size: 300px 200px; /* пара значений из не ключевых слов */
background-size: 50% auto;    /* не ключевое слово + плюс значение 'auto' */

Для пары значений первое значение задаёт ширину изображения, а второе значение задаёт высоту изображения.

Если указано только одно не ключевое значение, то второе считается как auto.

Свойство background-size может принимать несколько значений разделённых запятыми, поэтому когда у элемента указано несколько изображений в свойстве background-image, каждое значение будет применяться к соответствующему фоновому изображению (первое значение для первого фонового изображения, второе значение для второго и т.д.).

Синтаксис свойства

Значения свойства

  • <length> —  значение <length> масштабирует фоновое изображения до указанного значения в соответствующем направлении.
    Нельзя указывать отрицательную длину.
  • <percentage> — значение указанное в процентах масштабирует фоновое изображения до указанных процентов относительно области позиционирования фона, который определяется свойством background-origin. Если значение свойства background-origin не указано автором, будет использовано значение padding-box, то есть фоновое изображение позиционируется относительно системы координат фона, центр которой находится в верхнем левом углу.
  • contain — масштабирует изображение, сохраняя при этом его встроенное соотношение сторон, до наибольшего, чтобы его ширина и высота вписывались в область позиционирования. Если у фонового изображения нет встроенных пропорции и нет встроенного размера, то оно растягивается на всю область позиционирования.
  • cover — масштабирует изображение, сохраняя при этом его встроенное соотношение сторон, до наименьшего размера, чтобы его ширина и высота могли полностью покрывать область позиционирования. Если у фонового изображения нет встроенных пропорции и нет встроенного размера, то оно отображается в размере области позиционирования.
  • auto — ключевое слово, которое масштабирует фоновое изображение в соответствующем направлении, сохраняя его встроенные пропорции.
    • Если у изображения есть встроенные размере (высота и ширина), то оно будет отображаться со своими размерами.
    • Если у изображения нет встроенных пропорций и размеров, то оно будет отображаться с размерами области позиционирования.
    • Если у него нет размеров, но есть пропорции, то оно отобразиться так как-будто было установлено ключевое слово
      contain      .
    • Если у изображения есть один из встроенных размеров и пропорция, то оно отобразиться с размерами определёнными этим одним размером и пропорцией.
    • Если у изображения есть один из встроенных размеров, но нет пропорции, оно отобразиться с использованием этого одно встроенного размера и соответствуюещего размера области позиционирования.

Поддержка браузерами

CSS3 Background-image options

IE

9

0.09%

10

0.01%

11

0.48%

Edge

103

0.06%

104

0.65%

105

3.41%

Firefox

103

0.14%

104

1.6%

105

0.54%

106

0.01%

Chrome

104

4.81%

105

16.6%

106

0.29%

107

0.02%

108

0.01%

Safari

15.5

0.31%

15.6

1.78%

16.0

0.18%

16.1

0.01%

Safari on iOS

15.5

1.04%

15.6

8.71%

16.0

1.91%

16.1

0.02%

Chrome for Android

105

41.23%

Полная поддержка

Частичная поддержка

С префиксом

Не поддерживается

Данные с сервиса caniuse.com

Пример

Ниже вы увидите пример использования свойства background-size:

свойство -o-background-size | -webkit-background-size свойство CSS (каскадные таблицы стилей)

Вы находитесь здесь: Справочник > CSS > свойства > расширения браузера > -o-background-size

Поддержка браузера:

-o-background-size :
-webkit-background-size :

Устанавливает размер фонового изображения.

Страница JavaScript для этого свойства: OBackgroundSize | webkitBackgroundSize. Вы можете найти другие примеры там.

Возможные значения:

 Одно из следующих значений: 
І
 Любое из следующих значений (для их разделения используйте пробел , каждое значение можно использовать только один раз): 
І круглый
І
 Это значение можно использовать от 1 до 2 раз (для их разделения используйте пробел ) 
І
 Одно из следующих значений: 
І <размер в неотрицательной длине>
І размер в неотрицательных процентах
І авто
І наследовать

Описание значений:

авто По умолчанию. Размер фонового изображения равен размеру исходного изображения.
унаследовать Берет значение этого свойства из вычисленного стиля родительского элемента.
круглый Свойства ширины и высоты фоновых изображений округлены в меньшую сторону, чтобы отображались изображения примерно одинакового размера.
размер неотрицательной длины Размер фонового изображения в единицах длины. Информацию о поддерживаемых единицах длины см. на странице длины.
размер в неотрицательных процентах Размер — указанный процент от размера фоновой области позиционирования.

По умолчанию: авто .


Если указано только одно значение размера, оно также влияет на размер по горизонтали и по вертикали.

Пример кода HTML 1:

Этот пример иллюстрирует использование свойств -o-background-size и -webkit-background-size :

 <голова>
    <стиль>
        . resBg {
            отступ: 30 пикселей;
            фон: url("area.gif") без повтора;
            граница: 4 пикселя с зелеными точками;
            -o-размер фона: 60px 60px;
            -webkit-background-size: 60px 60px;
        }
    
  
<тело>
    
Раздел с фоновым изображением измененного размера

Этот пример был вам полезен? да нет

Поддерживается тегами:

a, abbr, acronym, address, applet, b, bdo, big, blink, blockQuote, body, button, caption, center, cite, code, dd, del, dfn, dir, div , dl, dt, em, fieldSet, шрифт, форма, h2, h3, h4, h5, H5, H6, hr, html, i, iframe, img, ввод: кнопка, ввод: флажок, ввод: файл, ввод: изображение , ввод:пароль, ввод:радио, ввод:диапазон, ввод:сброс, ввод:отправить, ввод:текст, ins, isIndex, kbd, label, legend, li, marquee, menu, object, ol, p, plainText, pre , q, s, samp, select, small, span, strike, strong, sub, sup, table, tBody, td, textArea, tFoot, th, tHead, tr, tt, u, ul, var, xmp, ввод: поиск

Связанные страницы:

-moz-background-clip
-webkit-background-composite
-moz-background-origin

Внешние ссылки:

-webkit-background-size (справочная библиотека Safari) Advanced
0 CSS3

Делиться: Дигг Вкусный Реддит Фейсбук Твиттер Дииго

Пользовательские комментарии

Руководство

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

Как я определяю размер изображений в заголовке

Если вы похожи на меня, вы сталкивались с этим слишком много раз, чтобы сосчитать.

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

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

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

Ваш справочник по размерам фоновых изображений героев

Если ваше изображение будет заголовком/главным фоновым изображением, оно должно быть длинным и не слишком высоким. Я делаю свои изображения заголовка 1600 x 500px.

Размер фоновых изображений на всю страницу тоже правильный

Если вы создаете фоновое изображение на всю страницу, вам нужно, чтобы эти изображения были немного выше. Я делаю эти изображения 1600 x 1000px или иногда 1920 х 1200 пикселей. Обычно я делаю оба размера, а затем сжимаю их. Если большее изображение хорошо сжимается и не слишком большое (все еще меньше 400 КБ), я выбираю изображение размером 1920 x 1200 пикселей.

Не забывайте, как изображение может выглядеть на мобильном телефоне

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

Если все выглядит хорошо, перейдите к следующему разделу.

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

В этом случае я переключаю главное изображение (используя медиа-запрос), чтобы на мобильных устройствах отображалось мобильное изображение, а на больших экранах отображалось обычное основное изображение. Обычно я делаю свои мобильные изображения размером 800 x 1200 пикселей.

Вы можете поменять местами изображения героев и мобильных устройств в CSS следующим образом:

 
 CSS 
 
 1.hero-image { 
 
 2 background: url('my-mobile-hero-image.jpg') без повторов по центру вверху; 
 
 3 background-size: обложка; 
 
 4} 
 
 5@media (минимальная ширина: 768px) { 
 
 6 background: url('my-hero-image.jpg') no-repeat center top; 
 
 7}

Это покажет ваше мобильное изображение на любом экране шириной менее 768 пикселей. Если размер экрана больше 768 пикселей, будет отображаться фоновое изображение.

Используйте мой шаблон эскиза

Чтобы упростить вам задачу, не стесняйтесь загружать шаблон эскиза, который я использую. Он имеет артборд для изображения заголовка, изображения на всю страницу и изображения для мобильных устройств.

Надеюсь, это сэкономит вам время и энергию, когда в следующий раз вам понадобится создать изображение для своего веб-сайта. 🙂

Оптимизация изображения

Как только вы узнаете высоту и ширину вашего изображения, вы захотите сместить свое внимание на уменьшение размера изображения, чтобы оно не оказывало существенного отрицательного влияния на время загрузки страницы.

Иногда jpg меньше, а иногда png меньше. Как правило, для этого типа изображения размер jpg будет меньше. Но если вы не уверены, просто экспортируйте jpg и png и посмотрите, какой из них сжимается до меньшего размера.

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

Как правило, старайтесь уменьшать размер изображения до 400 КБ или меньше.

Средства сжатия изображений

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

Вероятно, самый простой способ сжать ваши изображения — просто перейти к Tiny PNG.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *