Background size cover что это: Как работает background-size:cover? — Хабр Q&A

background-size — CSS | MDN

Значение background-size в CSS позволяет задавать размер фонового изображения. Изображение может быть оставлено в исходном размере, растянуто, или подогнано под размеры доступного пространства.

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

background-size: cover;
background-size: contain;



background-size: 50%;
background-size: 3em;
background-size: 12px;
background-size: auto;



background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;



background-size: auto, auto;
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;


background-size: inherit;
background-size: initial;
background-size: unset;

Значения

<размер>

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

<проценты>

Значение <percentage>, которое масштабирует фоновое изображение в соответствующем измерении до указанного процента области расположения фона, которое определяется значением background-origin. Область расположения фона по умолчанию является областью, содержащей содержимое поля и его отступы; область также может быть изменена на содержимое или область, содержащую границы, отступы и содержимое. Если attachment фона является

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

auto

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

contain

Масштабирует картинку так, чтобы она максимально накрыла собой весь блок. Картинка при этом не обрезается, а вписывается в блок с сохранением пропорций.

cover

Ключевое слово, обратное contain. Масштабирует изображение как можно больше c сохранением пропорций изображения (изображение не становится сплющенным). Когда изображение и контейнер имеют разные размеры, изображение обрезается либо влево / вправо, либо сверху / снизу.

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

Предупреждение: Это поведение изменилось в Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5). До этого, градиенты обрабатывались как изображения без внутренних размеров, с внутренней пропорцией, идентичной пропорции области расположения фона.

Фоновые изображения, сгенерированные из элементов с использованием -moz-element (en-US) (которые фактически соответствуют элементу) в настоящее время обрабатываются как изображения с размерами элемента, или как область расположения фона, если элементом является SVG, с соответствующей внутренней пропорцией.

Предупреждение:

Это не определённое в настоящее время поведение, которое заключается в том, что внутренние размеры и пропорция должны быть такими же как у элемента во всех случаях.

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

Если оба атрибута в background-size заданы и различны от auto:

Фоновое изображение отображается в указанном размере.

Если background-size содержит contain или cover:

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

Если background-size установлен как auto или auto auto:

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

Если background-size содержит один атрибут auto и один не-auto:

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

Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, ещё не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.

Формальный синтаксис

Если вы указываете градиент в качестве фона и указали background-size, который будет использоваться вместе с ним, лучше не указывать размер, который использует единственную автоматическую составную часть, или задаётся с использованием только значения ширины (для примера, background-size: 50%). Рендеринг градиентов в таких случаях изменился в Firefox 8, и в настоящее время он обычно несовместим во всех браузерах, которые не реализуют рендеринг в соответствии с CSS3 спецификацией

background-size и с CSS3 спецификацией градиента значений изображения.

.bar {
       width: 50px; height: 100px;
       background-image: gradient(...);

       
       background-size: 25px;
       background-size: 50%;
       background-size: auto 50px;
       background-size: auto 50%;

       
       background-size: 25px 50px;
       background-size: 50% 50%;
}

Обратите внимание, что особенно не рекомендуется использовать размер в пикселях и размер 

auto с градиентом, потому что невозможно воспроизвести рендеринг в версиях Firefox до 8 и в браузерах, не реализующих рендеринг Firefox 8, без знания точного размера элемента, фон которого указывается.

BCD tables only load in the browser

size | HTML и CSS с примерами кода

Свойство 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. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задаёт ширину и высоту фоновой картинки.

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

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

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

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

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>

webkit-background-size — свойство css :: руководство cssdot.ru

Свойство -webkit-background-size позволяет указывать размеры фонового изображения, которые могут быть заданы в абсолютных величинах (cm, mm, in и т.д.), относительных (px, em и т.д.), или в процентах, по отношению к ширине и высоте элемента контейнера. Масштабировать фоновое изображение возможно как с сохранением исходных пропорций, так и без них.

Допустимые значения

• length{1,2} — задает размер фонового изображения в абсолютных величинах (cm, mm, in и т.д.) или относительных (px, em и т.д.). Если задано только одно значение, то второе вычисляется автоматически исходя из пропорций картинки.
• percentage{1,2} — задает размер фонового изображения в процентах от ширины и/или высоты элемента контейнера. Если задано только одно значение, то второе вычисляется автоматически исходя из пропорций картинки.
• auto{1,2} — задает размер фонового изображения равным исходному, в случае, если указаны обе величины auto, или просто auto; а если указан только для одной стороны картинки (25% auto), то размер вычисляется исходя из пропорций картинки.
• cover — масштабирует картинку с сохранением пропорций по меньшей стороне, то есть так, чтобы фон с избытком покрывал блок-контейнер.
• contain — масштабирует картинку с сохранением пропорций по большей стороне, то есть так, чтобы блок-контейнер с избытком покрывал фон.

Примечания

Chrome 1-3, Safari 3-4

Свойство -webkit-background-size в движке WebKit изначально было реализовано в рамках черновика спецификации CSS3, в котором отсутствовали ключевые слова contain и cover, а так же предполагалось, что если задан размер фоновой картинки с использованием только одного параметра, то второй параметр считается, не пропорционально размерам картинки, а равен первому.

Свойство -webkit-background-size относится к спецификации CSS, применяется к всем элементам, и действует на всех визуальные носителях, его значение не наследуется от родительского элемента в иерархии документа, Является расширением движка WebKit (браузеры Chrome и Safari), и не совместимо с другими браузерами.

Смотри также:

• background-size — Размер фонового изображения, или его масштаб относительно элемента-контейнера.
• -o-background-size — Размер фонового изображения, или его масштаб относительно элемента-контейнера.
• -moz-background-size — Размер фонового изображения, или его масштаб относительно элемента-контейнера.

Краткое описание

Размер фонового изображения, или его масштаб относительно элемента-контейнера.

Синтаксис:

[ <length> | <percentage> | auto ]{1,2} | cover | contain [, [ <length> | <percentage> | auto ]{1,2} | cover | contain]*

Применяется к:

всем элементам

Наследование:

не наследуется

Тип носителя:

визуальные

Объектная модель документа (DOM):

[элемент].style[‘-webkit-background-size’]

Кроссбраузерная совместимость

Internet Explorer

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

Firefox

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

Chrome

1.0	2.0	3.0	4.1	5.0	6.0	7.0	8.0	9.0	10.0	11.0	12.0	13.0	14.0	15.0	16.0	17.0	18.0	19.0	20.0
+/-	+/-	+/-	+	+	+	+	+	+	+	+	+	+	+	+	+	+	+	+	+

Safari

1.0	1.1	1.2	1.3	2.0	3.0	3.2	4.0	5.0
—	—	—	—	—	—	+/-	+/-	+

Opera

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

Подробно о свойстве CSS Background

 

Каждый элемент в DOM-дереве напоминает прямоугольник, который имеет фоновый слой, он может быть либо полностью прозрачным, либо цветным, либо содержать изображение. Этот фоновый слой находится под контролем 8 свойств CSS (плюс 1-го сокращённого свойства).

background-color

Свойство background-color задает цвет фона для элемента. Это значение может быть любым принятым значением цвета, или ключевым словом transparent.

.left { background-color: #ffdb3a; }
.middle { background-color: #67b3dd; }
.right { background-color: transparent; }

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

background-image

Свойство background-image определяет фоновое изображение (или изображения) для элемента. Это значение обычно представляет собой URL к изображению, определенному в url() нотации. Также может быть использовано значение none, которое будет учитываться в качестве слоя, но пустого.

.left { background-image: url(‘ire.png’); }
.right { background-image: none; }

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

.middle {
  background-image: url(‘khaled.png’), url(‘ire.png’);

  /* Other styles */
  background-repeat: no-repeat;
  background-size: 100px;
}

background-repeat

Свойство background-repeat управляет тем как фоновое изображение заполняет пространство, после того как установлен его размер (при помощи свойства background-size (см. ниже)) и расположение (при помощи свойства background-position (см. ниже)).

Значение этого свойства может быть одним из следующих: repeat-x, repeat-y, repeat, space, round, no-repeat. Кроме первых двух (repeat-x и repeat-y), другие значения могут быть определены или один раз, для оси х и оси у, или для каждой оси по отдельности.

.top-outer-left { background-repeat: repeat-x; }
.top-inner-left { background-repeat: repeat-y; }
.top-inner-right { background-repeat: repeat; }
.top-outer-right { background-repeat: space; }

.bottom-outer-left { background-repeat: round; }
.bottom-inner-left { background-repeat: no-repeat; }
.bottom-inner-right { background-repeat: space repeat; }
.bottom-outer-right { background-repeat: round space; }

background-size

Свойство background-size определяет размер фонового изображения. Это значение может содержать ключевое слово, длину или процент.

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

.left {
  background-size: contain;
  background-image: url(‘ire.png’);
  background-repeat: no-repeat;
}
.right { background-size: cover; /*Остальные стили такие же как для класса as .left */ }

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

.left { background-size: 50px; /*Остальные стили такие же как для класса .left */ }
.right { background-size: 50% 80%; /*Остальные стили такие же как для класса .left */ }

background-attachment

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

Ключевое слово fixed означает, что фоновое изображение фиксируется в видимой области экрана и не двигается, даже когда пользователь прокручивает прокручивает окна. local означает, что фон должен быть закреплен в своем положении в элементе. Если элемент имеет прокрутку и фоновое изображение позиционируется сверху, то при прокрутке элемента вниз, фоновое изображение останется на месте, вне области видимости. И, наконец, scroll означает, что фоновое изображение является фиксированным и не будет прокручиваеться вместе с содержанием элемента.

.left {
  background-attachment: fixed;
  background-size: 50%;
  background-image: url(‘ire.png’);
  background-repeat: no-repeat;
  overflow: scroll;
}
.middle { background-attachment: local; /* Остальные стили такие же как для класса .left */ }
.right { background-attachment: scroll; /*Остальные стили такие же как для класса .left */ }

background-position

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

Доступны следующие ключевые слова top, right, bottom, left, и center. Мы можем использовать эти ключевые слова в любой комбинации, и если указано только одно ключевое слово, то предполагается что другое равно center.

.top-left {
  background-position: top;
  background-size: 50%;
  background-image: url(‘ire.png’);
  background-repeat: no-repeat;
}
.top-middle { background-position: right;  /*Остальные стили такие же как для класса .top-left */ }
.top-right { background-position: bottom;  /*Остальные стили такие же как для класса .top-left */ }
.bottom-left { background-position: left;  /*Остальные стили такие же как для класса .top-left */ }
.bottom-right { background-position: center;  /*Остальные стили такие же как для класса .top-left */ }

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

.left { background-position: 20px 70px; /*Остальные стили такие же как для класса .top-left */ }
.right { background-position: 50%; /*Остальные стили такие же как для класса .top-left */ }

background-origin

Свойство background-origin определяет область позиционирования фонового изображения.

Доступные значения следующие: border-box — фон позиционируется относительно границы, при этом линия границы может перекрывать изображение, padding-box  — фон позиционируется относительно края элемента с учетом толщины границы, и content-box — фон позиционируется относительно содержимого элемента.

.left {
  background-origin: border-box;
  background-size: 50%;
  background-image: url(‘ire.png’);
  background-repeat: no-repeat;
  background-position: top left;
  border: 10px dotted black;
  padding: 20px;
}
.middle { background-origin: padding-box;  /*Остальные стили такие же как для класса .left*/ }
.right { background-origin: content-box;  /*Остальные стили такие же как для класса .left*/ }

background-clip

Свойство background-clip определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.

.left{
  background-clip: border-box;
  background-size: 50%;
  background-color: #ffdb3a;
 background-repeat: no-repeat;
  background-position: top left;
  border: 10px dotted black;
  padding: 20px;
}
.middle { background-clip: padding-box;  /*Остальные стили такие же как для класса .left*/ }
.right { background-clip: content-box;  /*Остальные стили такие же как для класса .left*/ }

background

И, наконец, свойство background является обобщающим для других свойств фона. Порядок подсвойств не имеет значения, так как типы данных для каждого свойства различны. Тем не менее, для background-origin и background-clip, если указано только одно значение, оно используется для обоих свойств. Если два, первое устанавливается для свойства background-origin.

Перевод статьи с https://bitsofco.de/

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

масштабируем фон — учебник CSS

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

Значения background-size

Значения для свойства background-size можно задавать при помощи ключевых слов, а также в любых единицах измерения CSS. В одной записи можно указывать размеры как для одной, так и для двух сторон — горизонтальной и вертикальной (последовательность важна).

Ключевые слова

• auto (значение по умолчанию) — если данное значение установлено для горизонтали и вертикали, т. е.:

  background-size: auto auto;
  

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

  background-size: 250px auto;
  

  …то высота фоновой картинки будет вычисляться автоматически.

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

  
  
  
  

• cover — фоновое изображение масштабируется так, чтобы полностью заполнить пространство элемента, при этом сохраняя свои пропорции. Если пропорции элемента не соответствуют пропорциям изображения, это может привести к тому, что часть рисунка будет скрыта.

  
  
  
  

Числовые значения

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

Чтобы задать точную ширину и высоту, используйте два значения — первое для ширины, второе для высоты:

background-size: 300px 300px;

Учтите, что изображение может исказиться, если вы не попадете в его пропорции:

Чтобы сохранить пропорции фона, используйте для одной из сторон свойство auto:

Здесь высота рисунка составляет 50% от высоты элемента, а ширина подгоняется автоматически

Свойство background-size часто используется на практике. Например, его очень удобно использовать, когда размер элемента указан в процентах. Если задать блоку ширину 50% от ширины экрана, а его фону — ширину 100%, то при изменении размера окна фон всегда будет соответствовать ширине элемента.

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

Практически все используемые браузеры (как десктопные, так и мобильные) хорошо работают со свойством background-size. Internet Explorer понимает данное свойство, начиная с 9-й версии.

---

Далее в учебнике: пишем стиль для фона, используя сокращенную запись — «мульти»-свойство background.

CSS свойство background-image как антипаттерн

CSS свойство background-image позволяет нам делать крутые вещи, но в большинстве случаев наступило время оставить его позади. На всякий случай — что такое антипаттерн.

Перевод статьи The CSS background-image property as an anti-pattern

Многие из нас набили руку, используя такое свойство CSS как background-image, делая c ним всё, что только можно. Для многих оно стало просто старым хорошим товарищем, но уже видимо тем, с которым пора распрощаться.

Сама проблема заключается не в свойстве background-image как таковом. Зачастую оно используется там, где ему совсем не место, например в CTA изображениях или для графики, имеющей отношение к элементам UI.

Если использовать его неправильно, то оно вполне может стать антипаттерном. Но есть ли подходящие кейсы для использования background-image? Несомненно есть.

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

Давайте не будем вспоминать дни танцующих хомячков на фоне.

Перейдем к делу и поговорим о конкретных недостатках использования background-image и затем о том, что мы можем использовать вместо него.

Вот несколько причин почему использованием background-image может быть плохой практикой в вёрстке:

Это плохо для SEO

Изображения, которые лежат в background-image не краулятся или не индексируются Google. Не велика проблема, да? Тогда посмотрите эту цитату из статьи How to Rank in Google Image Search на moz.com:

Треть всех поисковых запросов в Google выходит на изображения и 12.5% страниц с результатами поиска показывают блоки(карточки) с результатами для изображений.

Давайте призадумаемся. Одна треть или 33% всех запросов в Google выходит на изображения. Если картинка релевантна теме страницы или бизнес направлению вашего клиента (а если и нет, то возможно должно быть), вам точно нужно быть проиндексированным.

Если вы используете background-image, то тут вы в пролёте и у вас не может быть тега alt=«», чтобы отдать Google описание и контекст изображения.

Это плохо для доступности (Accessibility)

Свойство background-image не очень хорошо сказывается на доступности. Скринридеры будут полностью его игнорировать.

Посмотрите на ограничения с доступностью в этом случае:

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

Даже если скринридеры не полностью игнорируют изображения, в фонах которых нет текста alt="", который может дать полезное описание об изображении или передать его контекст.

Совет: Если вы хотите, чтобы скринридер пропустил изображение (ну вдруг это просто элемент дизайна), просто оставьте alt="" пустым (использование role="presentation" тут не самый оптимальный вариант, так как оно нарушает первое правило ARIA).

Плохо для производительности

Как свойство background-image может негативно влиять на производительность?

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

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

Тут ощутимая разница будет заметна на мобильных устройствах или при медленных интернет соединениях, так же как и на вычислительной мощности, требуемой для масштабирования изображений. Посмотрите статью Post-Mortem: Applied Image Optimization.

На обычном сайте изображения будут самым тяжелым куском из отправляемых данных. Мы просто обязаны оптимизировать их.

Пока вы можете это сделать через @media запросы с помощью CSS background-image, но в итоге, это будет довольно обременительным подходом, если вам понадобится изменить изображение или переименовать его, ну или поменять его версию.

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

Так как это всё слишком замудрено, люди просто забивают на этот момент и в итоге имеют одну версию изображения для всех размеров экранов и разрешений.

Хотя и есть всякие JavaScript библиотеки как bgset, но зачем добавлять ещё больше JavaScript для решения проблемы у которой и так много недостатков?

Добавьте к этому желание использовать фишки следующего поколения, такие как WebP, как прогрессивное улучшение и всё станет реально плохо с подходом на background-image.

Ваш браузер просто не может начать скачивать изображение до того, как он не скачает и не запарсит CSS.

Ещё одна польза в том, что если ваши изображения вставлены в CSS через background-image, браузеру нужно скачать и запарсить ваш CSS, перед тем, как он сможет запросить изображения.

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

Плохо для CMS и CDN

Свойство background-image также не очень хорошо, если дело касается CMS’ок и CDN’ов.

Давайте представим, что у нас есть главное изображение на сайте, которое я показываю с помощью background-image в div.

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

Если у меня есть ссылка на изображение, вставленная в CSS, то я сделаю глобальный поиск в редакторе и заменю все свои изображения, а вернее ссылки на них с локальных на CDN’овские.

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

Куда проще просто дать вашей CMS добавить URL префикс, но это может стать грубоватым подходом, если вы делаете это через CSS background-image, требующим генерацию инлайновых стилей или же если вы прибегаете к другим махинациям с вёрсткой.

Вообще, вставка ссылок на изображения в CSS сейчас мне кажется каким-то хардкодингом.

Ну так, а когда это выходит хорошим подходом?

Итак, мы только что обсуждали недостатки, но когда же выходит было бы хорошо воспользоваться background-image?

Это покажется слишком очевидным, но если вам надо просто добавить декоративное изображение как фон, то это именно тот кейс, в котором нужно использовать background-image!

Хорошо использовать background-image тогда, когда вам нужно просто фоновое изображение и ничего более.

Если вы так делаете, то рассмотрите использование image-set() вместе с background-image(), чтобы уменьшить проблемы с производительностью, упомянутые выше.

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

Используйте <picture>!

Я полагаю, что весьма весомой причиной широкого использования background-image является сопутствующее свойство — background-size: cover;, которое точно даст вам знать, что заданное изображение покрывает всю положенную область, к которой оно прикреплено.

Свойство object-fit уже спешит на помощь!

Если вы используете семантически верный элемент в купе со свойством object-fit, то вы получите тот же самый эффект, что и в случае с background-size: cover;, но также вы получите ещё и такие плюшки: SEO-friendly изображения.

Изображения, которые будут читаемы скринридерами. Тут нужно просто использовать свойство alt="".

Отличную работу с CMS сгенерированными ссылками на изображения и CDN’ами.

Этот подход будет отлично работать с srcset для оптимизированных изображений

Вы сможете использовать <source> для передовых форматов изображений, таких как .webp.

Это вообще не сложно сделать, а профитов немерено! Свойство object-fit указывает изображению или видео то, как оно должно умещаться в родительский контейнер. Вам нужно просто поменять это:

<div>
</div>

На это:

<picture>
  <img src="/some/man-with-a-dog.jpg"
       alt="Man with a dog"
      
  />
</picture>

Очевидно, что в обоих случаях вы бы не стали использовать инлайновые стили, но к нашей радости вы можете видеть то, какой гибкий подход у нас есть под рукой, если бы мы оставили background-image свойство и использовали бы действительно семантические HTML элементы, такие как <picture> и <img>.

Затем мы можем в лёгкую добавить адаптированные по размерам изображения через srcset. Мы также можем легко использовать передовые форматы, такие как .webp на выбор браузера из <source>.

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

Вот как бы выглядел код, который делает все эти вещи:

<picture>
    <source
        srcset="/some/_1170x658_crop_center-center/man-with-a-dog.webp 1170w,
                /some/_970x545_crop_center-center/man-with-a-dog.webp 970w,
                /some/_750x562_crop_center-center/man-with-a-dog.webp 750w,
                /some/_320x240_crop_center-center/man-with-a-dog.webp 320w"
       
        type="image/webp"
    />
    <source
        srcset="/some/_1170x658_crop_center-center/man-with-a-dog.jpg 1170w,
                /some/_970x545_crop_center-center/man-with-a-dog.jpg 970w,
                /some/_750x562_crop_center-center/man-with-a-dog.jpg 750w,
                /some/_320x240_crop_center-center/man-with-a-dog.jpg 320w"
       
    />
    <img
        src="/some/man-with-a-dog-placeholder.jpg"
        alt="Man with a dog"
       
        loading="lazy"
    />
</picture>

Так мы получаем:

Ленивую загрузку, если браузер её поддерживает (в противном случае они не происходит, всё нормально)

webp, если браузер его поддерживает.

srcset из оптимизированных адаптивных изображений на выбор браузера.

SEO-friendly, прогрессивное улучшение, доступность и производительность — всё это обернуто в одной, хорошо сделанной компактной вундервафле.

Boom!

И все эти изображения могут быть автоматически заресайзены прямо из CMS, с помощью таких инструментов, как ImageOptimize, упрощая ссылаемость на CDN или Amazon S3. И в конце концов, вы же можете делать обрезку изображений с помощью object-fit.

Со старым в новое!

Поддержка бразуерами <picture> и scrset фантастически хороша! (есть даже полифиллы, если они вам нужны.) и такая же хорошая поддержка для object-fit (тоже есть полифилл). Ещё один хороший паттерн для использования через polyfill.io.

В общем, настало время избавиться от background-image в вашем наборе инструментов, кроме тех редких случаев, когда оно вам реально будет нужно по назначению.

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

Не используйте изображения, как просто картинки; используйте соответствующие семантические HTML элементы.

Я думаю, что в конечном итоге вы поймете то, что ваши сайты станут более SEO-friendly, более доступны и куда более производительнее… а еще у вас будет ощущение удовлетворенности от написания на семантически грамотном HTML.

Свойство CSS background-image никогда не подразумевалось для использования основных изображений или UI элементов. Но сейчас для этого уже есть способы получше, так что давайте их просто использовать.

Если все это заинтересовало вас в плане оптимизации изображений, обратите внимание на отличную книгу images.guide, чтобы узнать об этом ещё больше!

Enjoy your object-fit!

Краткий обзор «object-fit» и «object-position» — CSS-LIVE

Перевод статьи A Quick Overview of `object-fit` and `object-position с сайта css-tricks.com для css-live.ru. Автор — Роберт Рендли.

Последнее время object-fit и object-position — мои любимые CSS-свойства. С ними разработчики могут управлять содержимым внутри img или video, подобно манипулированию содержимым background с помощью background-position и background-size.

Для начала, подробнее про

object-fit

Это свойство определяет, как элемент вроде img подстраивается под доступные ширину и высоту своего содержимого. С object-fit можно приказать содержимому заполнить этот бокс различными способами, например, «сохранить эти пропорции!» или «растянуться и занять как можно больше места!»

Вот пример:

Это изображение 400х260px. Если добавить к нему…

img {  
  width: 200px;
  height: 300px;
}

… то в итоге получим неуклюжее искажение, поскольку изображение сплющивается, чтобы уместиться в эти рамки:

Содержание в нашем img займёт всё доступное пространство в своём новом боксе, созданном при изменении его высоты и ширины, «ломая» тем самым его исходные пропорции.

Чтобы и сохранить пропорции изображения и заполнить всю доступную область, воспользуемся object-fit:

.cover {
  object-fit: cover;
}

Слева исходное изображение, а справа — изображение обрезанное по бокам, которое теперь сохраняет наши пропорции! Может в таком масштабе это и не выглядит впечатляющим, но как только мы столкнёмся с разработкой более реалистичных интерфейсов, вот тогда-то object-fit и проявит себя во всей красе.

Возьмём другой пример:

Здесь у нас два изображения, которые должны занимать 50% ширины окна браузера (чтобы они стояли бок о бок) и 100% высоты. Для этого воспользуемся единицами области просмотра.

img {
  height: 100vh;
  width: 50vw;
}

Проблема всплывает, когда при изменении размера экрана меняются и пропорции изображения, что приводит к всевозможным странностям. А нам бы хотелось сохранить их пропорции, как и в предыдущем демо, так что для этого можно использовать тот же метод. object-fit: cover, выручай!

Попробуйте снова изменить размер экрана. Странности с пропорциями исчезли, так ведь? Это также весьма полезно для изображений с различными размерами, поскольку они фактически будут обрезаны по границам бокса.

cover — лишь одно из многих значений для object-fit, о которых более подробно можно почитать в справочнике, но пока что это единственное значение, которое кажется мне наиболее полезным для повседневной разработки интерфейсов.

Перейдём к следующему из моих любимых свойств:

object-position.

Воспользуемся уже знакомым изображением и этими стилями:

img {  
  background: yellow;
  height: 180px;
  object-fit: none;
}

Здесь стоит отметить пару вещей: для правильной работы object-position нужно объявить размеры для изображения, а чтобы изображение не заполняло весь бокс (как это происходит по умолчанию), а его можно было сдвинуть, нужно установить ему object-fit: none. Это может показаться странным, но всё дело в том, что по умолчанию для изображения устанавливается object-fit: fill, даже если не объявлять его специально.

Что касается поведения по умолчанию, без значения object-position центрирует все объекты по горизонтали и вертикали:

img {
  background: yellow;
  height: 180px;
  object-fit: none;
  object-position: 50% 50%; /* Даже если это не объявлять, изображение всё равно отцентрируется. */
}

Первое значение смещает изображение влево или вправо, а второе — вверх или вниз. Здесь можно поэкспериментировать с этими значениями:

Мы можем даже «протолкнуть» изображение внутрь его области контента, так что можно будет увидеть background-color, который мы задали раньше

Но насколько это полезно? Хороший вопрос! Вот в недавнем проекте мне потребовалось сдвинуть к центру конкретный участок изображения, и тем самым привлечь внимание читателя. Загрузка нового изображения не требуется, поэтому в этом случае не понадобится элемент <picture>, всё, что мы хотели — немного сдвинуть изображение.

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

Я не эспериментировал, как и для чего можно использовать это для элементов <video>. Может быть, видео на весь экран, заполняющее его без черных полос по краям? Чтобы полностью раскрыть потенциал этих свойств, изучить предстоит ещё очень много.

Что с поддержкой?

В целом, неплохо!

object-fit поддерживается везде, кроме IE/Edge. А object-position поддерживается везде, кроме Safari и IE/Edge.

P.S. Это тоже может быть интересно:

размер фона — CSS: каскадные таблицы стилей

Свойство CSS background-size устанавливает размер фонового изображения элемента. Изображение можно оставить до его естественного размера, растянуть или ограничить, чтобы оно соответствовало доступному пространству.

Пространства, не покрытые фоновым изображением, заполняются свойством background-color , и цвет фона будет виден за фоновыми изображениями, имеющими прозрачность / полупрозрачность.

 
размер фона: обложка;
размер фона: содержать;



размер фона: 50%;
размер фона: 3.2em;
размер фона: 12 пикселей;
размер фона: авто;



размер фона: 50% авто;
размер фона: 3em 25%;
размер фона: авто 6 пикселей;
размер фона: авто авто;


размер фона: авто, авто;
размер фона: 50%, 25%, 25%;
размер фона: 6 пикселей, авто, содержать;


размер фона: наследовать;
размер фона: начальный;
размер фона: не задано;
  

Свойство background-size задается одним из следующих способов:

• Использование значений ключевого слова содержит или покрытия .
• Используется только значение ширины, в этом случае высота по умолчанию авто .
• Использование значения ширины и высоты; в этом случае первое устанавливает ширину, а второе — высоту. Каждое значение может быть <длина> , <процент> или авто .

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

Значения

содержат

Максимально масштабирует изображение в пределах своего контейнера без обрезки или растяжения изображения.Если контейнер больше, чем изображение, это приведет к мозаике изображения, если для свойства background-repeat не установлено значение no-repeat .

крышка

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

авто

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

<длина>

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

<процент>

Растягивает изображение в соответствующем измерении до указанного процента от области позиционирования фона . Область позиционирования фона определяется значением background-origin (по умолчанию поле заполнения). Однако, если для фона значение background-attachment равно fixed , то область позиционирования — это все окно просмотра.Отрицательные значения не допускаются.

Внутренние размеры и пропорции

Вычисление значений зависит от внутренних размеров изображения (ширина и высота) и внутренних пропорций (отношение ширины к высоте). Эти атрибуты следующие:

• Растровое изображение (например, JPG) всегда имеет внутренние размеры и пропорции.
• Векторное изображение (например, SVG) не обязательно имеет внутренние размеры. Если он имеет как горизонтальные, так и вертикальные внутренние размеры, он также имеет внутренние пропорции.Если у него нет размеров или только одно измерение, оно может иметь или не иметь пропорций.
• CSS <градиент> s не имеют внутренних размеров или внутренних пропорций.
• Фоновые изображения, созданные с помощью функции element () , используют внутренние размеры и пропорции генерирующего элемента.

Примечание: В Gecko фоновые изображения, созданные с помощью функции element () , в настоящее время обрабатываются как изображения с размерами элемента или области позиционирования фона, если элемент SVG, с соответствующей внутренней пропорцией.Это нестандартное поведение.

На основе внутренних размеров и пропорций визуализированный размер фонового изображения вычисляется следующим образом:

Если указаны оба компонента background-size , а не auto :

Фоновое изображение отображается с указанным размером.

Если background-size — это , содержать или обложку :

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

Если background-size — auto или auto auto :

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

Примечание. изображений SVG имеют атрибут preserveAspectRatio , который по умолчанию эквивалентен , содержит ; явный background-size заставляет игнорировать preserveAspectRatio .

Если background-size имеет один компонент auto и один компонент не auto :

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

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

Работа с градиентами

Если вы используете <градиент> в качестве фона и задаете background-size , чтобы использовать его, лучше не указывать размер, который использует один компонент auto или задан используя только значение ширины (например, background-size: 50% ).Рендеринг <градиент> с в таких случаях изменен в Firefox 8 и в настоящее время обычно несовместим между браузерами, которые не все реализуют рендеринг в полном соответствии со спецификацией CSS3 background-size и градиентом CSS3 Image Values. Технические характеристики.

  .gradient-example {
  ширина: 50 пикселей;
  высота: 100 пикселей;
  фоновое изображение: линейный градиент (синий, красный);

  
  размер фона: 25 пикселей;
  размер фона: 50%;
  размер фона: авто 50 пикселей;
  размер фона: авто 50%;

  
  размер фона: 25 пикселей 50 пикселей;
  размер фона: 50% 50%;
}
  

Обратите внимание, что особенно не рекомендуется использовать измерение в пикселях и измерение auto с <градиент> , потому что невозможно реплицировать рендеринг в версиях Firefox до 8 и в браузерах, не реализующих рендеринг Firefox 8, без зная точный размер элемента, фон которого указывается.

Тип анимации19 простого списка длины, процента или вычисления

Начальное значение	авто авто
Применяется ко всем элементам	. Это также относится к :: первая буква и :: первая строка .
Унаследовано	нет
Процентное соотношение	относительно области позиционирования фона
Вычисленное значение	, как указано, но с относительной длиной, преобразованной в абсолютную длину

Мозаика большого изображения

Давайте рассмотрим большое изображение, изображение логотипа Firefox размером 2982×2808.Мы хотим разделить четыре копии этого изображения на элемент размером 300×300 пикселей. Для этого мы можем использовать фиксированное значение background-size , равное 150 пикселям.

HTML

CSS

  .tiledBackground {
  background-image: url (https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  размер фона: 150 пикселей;
  ширина: 300 пикселей;
  высота: 300 пикселей;
  граница: сплошная 2px;
  цвет: розовый;
}
  

Результат

Дополнительные примеры см. В разделе «Масштабирование фоновых изображений».

Таблицы BCD загружаются только в браузере

Расположение и размер фонового изображения

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

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

Начнем с примера с изображением с соотношением сторон 2 × 1. Это означает, что каждые 2 пикселя в ширину и в 1 пиксель в высоту. На изображениях ниже мы выделили два размера экрана: настольный и мобильный, чтобы показать, как работает каждый параметр размера.

Размер фона: Cover

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

Размер фона: Содержит

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

Размер фона: 100% 100%

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

Надеюсь, это поможет объяснить параметры изменения размера фона.

Параллакс фон

Одна из забавных функций наших премиальных тем — возможность добавлять фоны с параллаксом. Ознакомьтесь с разделом «хочу увидеть больше» этой демонстрации.
Параметры фона для этого можно найти в стилях строк вашего конструктора страниц. Я хочу вкратце объяснить, чем параллакс отличается от «background-size: cover».

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

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

Ниже приведены два примера: один с заданным фоном для покрытия, а другой с заданным параллаксом фона.

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

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

Для параллаксного фона я рекомендую использовать изображения около 2000 пикселей в ширину и 1200 пикселей в высоту.

Как работает свойство CSS «background: cover»?

Закрыто. Это вопрос не по теме. В настоящее время он не принимает ответы.

---

Хотите улучшить этот вопрос? Обновите вопрос, чтобы он соответствовал теме обмена графическим дизайном.

Закрыт 6 лет назад.

В настоящее время я «борюсь» с проблемой с частями веб-сайта, которые мне нужно полностью покрыть изображением. Таким образом, я попробовал свойство CSS background: cover. Ну, чтобы быть полным, я на самом деле не выбирал: я работаю с темой WordPress, но я в основном ее настраиваю. Опции, включенные в тему, позволяют выбирать между «стандартным» фоном для заголовков или «обложкой».

Но это не работает, как я себе представлял. Вот как я предполагал, что это работает: при разрешении 1920 пикселей в ширину и на веб-сайте вертикальное пространство заголовка 500 пикселей. Если я сделаю фон 1920x500px и помещу его как Background со свойством Cover, разве он не должен увеличиваться и отображаться в исходном размере, поскольку разрешение позволяет это?

Если я сделаю фон шире и выше, чем «контейнер», опять же с помощью свойства Cover, разве он не должен сжиматься?

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

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

Можете ли вы сказать мне, правильно ли я понимаю, как работает свойство CSS background: cover, или это может быть проблемой в коде?

Что скажешь? PEBKAC или не PEBKAC? : D

Надеюсь, я объяснил свой вопрос. Большое спасибо.

CSS | Свойство background-size — GeeksforGeeks

CSS | Свойство background-size

Свойство background-size в CSS используется для установки размера фонового изображения.

Синтаксис:

 размер фона: авто | длина | обложка | содержать | начальный | наследование; 

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

auto: Используется для установки для свойства background-size значения по умолчанию. Он используется для отображения исходного размера фонового изображения.

• Синтаксис:

   background-size: auto; 

• Пример:

  < html > 0004 титул > фоновый размер Свойство титул > 000 000 000 000 000 000 body { background-image: url ( background-size: auto; background-repeat: no-repeat; } } 90 002 стиль > головка > 0004 0004 0004 0004 0004 0005 h3 > размер фона: авто; h3 > корпус > 54> 54

• Вывод:
  

длина: Используется для установки ширины и высоты фонового изображения.Первое значение указывает ширину, а второе значение указывает высоту фонового изображения в пикселях, pt, em и т. Д. Если какое-либо значение не указано, то оно устанавливается на авто.

• Синтаксис:

   размер фона: длина; 

• Пример:

  < html > 0004 0004 титул > фоновый размер Свойство титул > 000 000 000 000 000 000 000 body { background-image: url ( background-size: 400px 450px; background-repeat: no-repeat; 90 007 стиль > головка > 0004> 0004 < h3 > размер фона: длина; h3 > корпус > 45

• Вывод:
  

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

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

• Синтаксис:

   размер фона: обложка; 

• Пример:

  < html > 0004 0004 титул > фоновый размер Свойство титул > 000 000 000 000 000 000 000 body { background-image: url ( background-size: cover; background-repeat: no-repeat; } } 9 0002 стиль > головка > 0004 0004 0004 0004 0004 0005 h3 > размер фона: крышка; h3 > корпус > 54> 54

• Вывод:
  

Поддерживаемые браузеры: Браузеры, поддерживаемые свойством background-size , перечислены ниже:

• Google Chrome 4.0, 1.0 -webkit-
• Internet Explorer 9.0
• Firefox 4.0, 3.6-moz-
• Opera 4.1, 3.0 -webkit-
• Safari 10.5, 10-o-

CSS object-fit is background-size - покрытие; для видео!

Вы когда-нибудь хотели использовать background-size: cover; по штатным элементам? Что ж, оказывается, вы можете с помощью свойства CSS под названием object-fit - и с недавним выпуском FireFox 36 мы можем начать использовать его в наших проектах, поскольку у нас действительно хорошая поддержка браузера.

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

Ввести соответствие объекту. Это новое свойство CSS3, которое мы можем использовать для растягивания встроенного мультимедиа (видео и изображений) по всему родительскому объекту, сохраняя при этом соотношение сторон. JavaScript не требуется!

Как это работает? Это довольно просто - сначала вы начинаете с контейнера, который имеет определенную ширину и высоту - для наших целей я использую единицы просмотра, чтобы получить идеальную 100% ширину и высоту экрана.Затем на самом видео или изображении мы используем object-fit: cover; . Теперь вы увидите диапазон видео по всему элементу - он обрезан либо слева / справа, либо сверху / снизу, чтобы обеспечить полное покрытие.

Мы также можем использовать object-fit: contain;, который совпадает с background-size: cover ;, он не обрезает видео, а показывает, чтобы все видео всегда было видно. доступно еще несколько значений, но это наиболее вероятные варианты использования. при попытке воспроизвести размер фона: обложка; с видео.

Посмотрите демонстрацию - https://codepen.io/wesbos/full/YPmyxy/ или просмотрите код ниже. Наслаждаться!

Нашли проблему с этим сообщением? Думаете, вы могли бы что-то уточнить, обновить или добавить?

Все мои сообщения доступны для редактирования на Github. Любое исправление, маленькое или маленькое, приветствуется!

Редактировать на Github

← Назад

О том, что наша быстроразвивающаяся индустрия перегружена

Вперед →

Опытный пользователь командной строки

Увеличьте размер фона, пожалуйста! - Апартаменты A List Apart

В мире рекламы, стремящемся использовать каждый дюйм среды для представления бренда или продукта, становится все более популярным разрабатывать веб-сайты с полнофункциональным браузером.Используя CSS, этого можно легко достичь. Просто поместите на страницу огромное фоновое изображение с помощью одной строчки кода (перенос строк отмечен » — Ред. ):

Продолжение статьи ниже

  body {
  фон: # 000 url (myBackground_1280x960.jpg) »
центральный центр фиксированный без повтора;
}  

В первом примере показано центрированное фоновое изображение размером 1280 на 960 пикселей, закрепленное за областью просмотра (оно не прокручивается вместе с документом).

Но какой размер изображения будет достаточно большим? Мониторы и операционные системы быстро развивались, и в результате появился широкий диапазон доступных разрешений экрана.Самые популярные сегодня разрешения - 1024x768 пикселей, 1280x800 пикселей, 1280x1024 пикселей и 1440x900 пикселей. Однако с появлением экранов HD (1920x1080 пикселей) и профессиональных дисплеев, поддерживающих разрешение до 2560x1600 пикселей, возможно практически все.

Также есть основания для более низких разрешений. Многие люди изменяют размер окна браузера, чтобы заполнить часть экрана, в то время как ряд современных экранов поддерживает только разрешение 800x600 пикселей. И это оставляет множество карманных компьютеров с более низкими характеристиками.

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

Есть несколько обходных путей, однако все они полагаются на элемент HTML img (вместо фона CSS). Они также используют абсолютное позиционирование для слоев и таблиц или сценариев, чтобы разрешить изменение размера. Кроме того, не все эти методы сохраняют пропорции изображения, что приводит к нереалистично растянутому фону.

CSS3 фоны спешат на помощь # section2

Уровень 3 модуля W3C CSS Background and Borders (в настоящее время рабочий проект) определяет свойство background-size , которое соответствует нашим требованиям. Интересные значения (если ссылаться на спецификации W3C):

.

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

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

Содержит всегда соответствует всему изображению в области просмотра, оставляя непрозрачные границы либо на сверху-снизу , либо на слева-справа , если соотношение фонового изображения и окна браузера не совпадает. Во втором примере мы расширили код из первого примера, установив для свойства background-size значение , содержащее .

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

Чтобы включить масштабирование фона, добавьте в таблицу стилей следующие объявления:

  body {
  фон: # 000 url (myBackground_1280x960.jpg) »
центральный центр фиксированный без повтора;
  -moz-background-size: обложка;
  размер фона: обложка;
} 
 

Свойство background-size уже поддерживается Firefox 3.6 (с префиксом -moz ; Firefox 4 будет использовать обычное свойство CSS3), Chrome 5, Safari 5 и Opera 10.54; и он будет включен в Internet Explorer 9 (он уже доступен в Preview 3). Старые версии Webkit и Opera уже поддерживают свойство background-size , однако эти реализации основаны на предыдущем проекте, который не включал ключевые слова , содержащие , и , охватывающие .

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

Добавление медиа-запросов CSS3 в микс # section3

Модуль W3C CSS3 Media Queries (рекомендованный кандидат) определяет условные правила, которые применяются только в определенных диапазонах ширины или высоты. Это позволяет нам реализовать масштабирование фона с минимальной ширины и высоты и так далее. Медиа-запросы поддерживаются Firefox 3.5, Chrome, Safari 3 и Opera 7, а также будет включен в Internet Explorer 9.

Добавляя следующие правила стиля, мы сообщаем браузеру, что не хотим, чтобы фоновое изображение масштабировалось меньше 1024 × 768 пикселей:

  body {
  фон: # 000 url (myBackground_1280x960.jpg) »
центральный центр фиксированный без повтора;
  -moz-background-size: обложка;
  размер фона: обложка;
} @media only all and (max-width: 1024px) и (max-height: 768px) {
  тело {
    -moz-background-size: 1024px 768px;
    размер фона: 1024px 768px;
  }
} 
 

Обратите внимание, что разрешение 1024x768 пикселей соответствует соотношению сторон фонового изображения (1280x960 пикселей).При использовании другого соотношения вы получите внезапные скачки масштабирования при изменении размера окна браузера.

В наших последних примерах, четвертом и пятом, мы добавили правило @media , чтобы наше фоновое изображение не масштабировалось меньше 1024 на 768 пикселей. Пример 5 показывает, что, установив для свойства background-position значение left-bottom вместо center-center , мы можем контролировать способ выравнивания фонового изображения в области просмотра.

Возвращение к старым методам # section4

Это захватывающие времена для веб-разработчиков, когда все производители браузеров усердно работают над внедрением новых технологий, таких как HTML5 и CSS3. В результате пришло время пересмотреть старые методы, чтобы увидеть, как то же самое можно делать более разумными и чистыми способами. Хотя циклы обновления Firefox, Chrome, Safari и Opera относительно короткие, будет интересно посмотреть, как быстро люди охватят Internet Explorer 9, так что мы можем начать использовать многие из этих новых методов в ближайшее время в больших масштабах.

CSS размер фона

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

размер фона , то есть. CSS-свойство background-size позволяет разработчикам определять размер, при котором фоновое изображение должно появляться в элементе.Разработчик MooTools Кристоф Пойер использует на своем веб-сайте технику с размером фона , благодаря чему его шапка выглядит "полной" в браузерах любого размера, даже в мобильных. Давайте посмотрим, как использовать мистическое свойство background-size .

размер фона CSS

Свойство background-size имеет несколько предопределенных значений, а затем обычные числовые значения:

• содержать: Обеспечивает отображение всего фонового изображения, показывая изображение с масштабированным размером.
• cover: Масштабирует фоновое изображение так, чтобы наименьший размер достиг максимальной ширины / высоты элемента.
• длина / процент: Любой произвольный числовой размер

Хотите верьте, хотите нет, но самое интересное - это задание длины и размеров в процентах. Вот несколько примеров использования background-size :

/ * базовые классы заголовков * /
#header {
/ * размер заголовка! * /
высота: 350 пикселей;

/ * дополнительные свойства фона * /
фон-повтор: без повторения;
background-position: center center;

/ * немного тени для забавы * /
box-shadow: rgba (0,0,0,0.20) 0 10px 10px;
}

/* покрытие */
# header.flex {
/* размер имеет значение */
размер фона: обложка;
}

/* содержать */
# header.flex {
/* размер имеет значение */
размер фона: содержать;
}

/ * гибкость, веселье * /
# header.flex {
/* размер имеет значение */
размер фона: 100% авто;
}
 

На веб-сайте

Christoph используется последний пример, что позволяет хорошо видеть фанатов JavaScript во всех размерах браузеров. Посмотрите мои демонстрации, чтобы увидеть

Тонкое великолепие, обеспечиваемое использованием background-size , несколько удивительно.Обычно я довольно скептически отношусь к размеру окна и эффектам изменения размера, но этот метод помог мне увидеть ценность и простоту работы с фиксированными размерами и переменными эффектами в зависимости от размера браузера клиента.