Размер background image css: Свойство background-size — размер картинки фона

31.05.2023 Facebook Twitter LinkedIn Google+ Разное

background-size ⚡️ HTML и CSS с примерами кода

Свойство background-size масштабирует фоновое изображение, согласно заданным размерам.

Демо

Фон
  • background
  • background-attachment
  • background-blend-mode
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-position-x
  • background-position-y
  • background-repeat
  • background-size

Синтаксис

/* Keyword values */
background-size: cover;
background-size: contain;
/* One-value syntax */
/* the width of the image (height becomes 'auto') */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;
/* Two-value syntax */
/* first value: width of the image, second value: height */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
/* Multiple backgrounds */
background-size: auto, auto; /* Not to be confused with `auto auto` */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
/* Global values */
background-size: inherit;
background-size: initial;
background-size: unset;

Значения

<размер>
Задаёт размер в любых доступных для CSS единицах — пикселях (px), сантиметрах (cm), em и др.
<проценты>
Задаёт размер фоновой картинки в процентах от ширины или высоты элемента.
auto
Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
cover
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

Если установлено одно значение, оно устанавливает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задаёт ширину и высоту фоновой картинки.

Значение по-умолчанию:

background-size: auto;

Применяется ко всем элементам

Спецификации

  • CSS Backgrounds and Borders Module Level 3

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

Can I Use background-img-opts? Data on support for the background-img-opts feature across the major browsers from caniuse. com.

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>background-size</title>
    <style>
      div {
        height: 200px; /* Высота блока */
        border: 2px solid #000; /* Параметры рамки */
        background: url('/example/image/mybg.png') 100% 100%
          no-repeat; /* Добавляем фон */
        background-size: cover; /* Масштабируем фон */
      }
    </style>
  </head>
  <body>
    <div>...</div>
  </body>
</html>

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.44%

Edge

105

0.8%

106

3.08%

107

0.25%

Firefox

104

0.07%

105

1.51%

106

0.68%

107

0.01%

Chrome

105

6.01%

106

15.7%

107

0.64%

108

0.02%

109

0.01%

Safari

15.6

1.63%

16.0

0.5%

16.1

0.07%

16.2

0%

Safari on iOS

15.6

6.72%

16.0

4.55%

16.1

0.24%

Chrome for Android

107

40.28%

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

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

С префиксом

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

Данные с сервиса 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

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

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

Как создать фон для видео с помощью CSS

Если вы хотите привлечь новых посетителей на свой веб-сайт, у вас есть от 10 до 20 секунд. Чтобы вдохнуть жизнь в контент вашей страницы, вы можете попробовать добавить фоновое видео с помощью CSS.

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

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

Как создать полноэкранный видеофон с помощью CSS

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

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

 
 <зацикливание автовоспроизведения видео отключено poster="//winx-fan.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="video" data-poster="https://assets.codepen.io/6093409/river.jpg">
Comments
Leave Comment