Webkit background size: background-size — CSS | MDN

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

background-size | htmlbook.ru

Краткая информация

Версии CSS

Описание

Масштабирует фоновое изображение согласно заданным размерам.

Синтаксис

background-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain

Значения

<значение>

Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др.

<проценты>

Задает размер фоновой картинки в процентах от ширины или высоты элемента.

auto

Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.

cover

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

contain

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

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

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

Браузеры

Safari до версии 4.1 и Chrome до версии 3.0 используют нестандартное свойство -webkit-background-size.

Opera до версии 10.53 использует нестандартное свойство -o-background-size.

Firefox до версии 4.0 использует нестандартное свойство -moz-background-size.

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

Safari

Opera

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

Свойство background-size | CSS справочник

CSS свойства

Определение и применение

CSS свойство background-size определяет размер фонового изображения/-ий. Позиционирование фонового изображения внутри элемента определяется свойством background-origin.

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

CSS синтаксис:

background-size:"auto | length | cover | contain | initial | inherit";

JavaScript синтаксис:

object.style.backgroundSize = "150px 150px"

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

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Масштабирование фоновых  изображений в CSS</title>
<style> 
div {
width : 8em; /* устанавливаем ширину блока */
height : 8em; /* устанавливаем высоту блока */
border : 3px solid orange; /* устанавливаем сплошную границу размером 3px оранжевого цвета */
background : url(manul.jpg); /* указываем путь к файлу, который будет использоваться как фоновое изображение */
background-repeat : no-repeat; /* указываем, что фоновое изображение не будет повторяться */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
margin-right : 15px; /* устанавливаем величину отступа от правого края элемента */
margin-bottom : 15px; /* устанавливаем величину отступа от нижнего края элемента */
color : yellow; /* устанавливаем цвет шрифта желтый */
}
.test   {background-size : auto;}  /* фоновое изображение содержит свою ширину и высоту (значение по умолчанию) */
.test2 {background-size : 100px 100px;}  /* задаем ширину и высоту фонового изображения */
.test3 {background-size : 70% 70%;}  /* задаем ширину и высоту фонового изображения в процентах от родительского элемента */
.test4 {background-size : cover;}  /* масштабируем фоновое изображение под размеры элемента (часть изображения скрывается) */
.test5 {background-size : contain;}  /* масштабируем фоновое изображение, чтобы оно целиком поместилось внутри элемента */
</style>
</head>
	<body>
		<div class = "test">auto</div>
		<div class = "test2">100px 100px</div>
		<div class = "test3">70% 70%</div><br>
		<div class = "test4">cover</div>
		<div class = "test5">contain</div>
	</body>
</html>

Масштабирование фоновых изображений в CSS (свойство background-size).CSS свойства

размер фона — 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 загружаются только в браузере

css — background-size: cover не работает на iOS

Доработка ответа Райана без добавления нового узла html или использования запросов @media , с использованием только одного css .

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

Он работает как шарм и на iOS: https://www.doklist.com/

Этот код не будет работать, поскольку iOS использует высоту документа , а не область просмотра :

  кузов {
      фон: URL-адрес (https://www.w3schools.com/css/trolltunga.jpg) исправлен центр без повтора;
      -webkit-background-size: обложка;
      -moz-background-size: обложка;
      -o-background-size: обложка;
      размер фона: обложка;
}
  

Теперь это магия, тело : после исправлено, а не фон :

  тело: после {
      содержание:"";
      положение: фиксированное; / * растянуть фиксированное положение на весь экран * /
      верх: 0;
      высота: 100вх; / * исправлено исчезновение адресной строки мобильного браузера * /
      слева: 0;
      справа: 0;
      z-индекс: -1; / * необходимо оставить в фоновом режиме * /
      фон: url (https: // www.w3schools.com/css/trolltunga.jpg) center center;
      -webkit-background-size: обложка;
      -moz-background-size: обложка;
      -o-background-size: обложка;
      размер фона: обложка;
}  

Я мог бы использовать сам body с «position: fixed; overflow-y: scroll», но я не хотел связываться с позиционированием тела и моим общим макетом.

Так что сделаем это на теле : после очень легко исправить. Я тестировал решение на Mac и iOS с помощью firefox, safari, chrome.

Я также создал репозиторий github с двумя примерами для этого: https://github.com/thesved/fixed-cover-background

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 , несколько удивительно.Обычно я довольно скептически отношусь к размеру окна и эффектам изменения размера, но этот метод помог мне увидеть ценность и простоту работы с фиксированными размерами и переменными эффектами в зависимости от размера браузера клиента. background-size поддерживается в Firefox, Safari, Chrome, Opera и IE9 +.

Что вы думаете об этой технике — изящный трюк или полезный инструмент? Вы бы использовали это на своем личном веб-сайте? Как насчет бизнес-сайта?

Фотографии, представленные в этом посте, были сделаны в Лондоне во время хакатона MooTools.

Загрузить фоновые изображения в зависимости от размера экрана

TL; DR

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

Адаптивный фон Дисплей не отвечает Фон Загрузка

Установка свойства фона ‘background-size’ на ‘cover’ позволяет нам гарантировать, что он полностью покрывает область фона на экране любого размера.Но поскольку одно и то же изображение загружается независимо от размера экрана, этот параметр влияет только на отображение изображения, а не на загруженное изображение. В результате у вас может быть фоновое изображение размером 1400 пикселей, загруженное на мобильный экран Google Nexus 4.

  
html {
  фон: url ('large_bg.jpg') центральный центр без повтора исправлен;
  размер фона: обложка;
  -webkit-background-size: обложка;
  -o-background-size: обложка;
  -moz-background-size: обложка;
}
  

Загрузка адаптивного фонового изображения

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

  
@media screen и (max-width: 480 пикселей) {
  html {
    фон: url ('small_bg.jpg') центральный центр без повтора исправлен;
  }
}
@media screen и (min-width: 481px) и (max-width: 900px) {
  html {
    фон: url ('med_bg.jpg') центральный центр без повтора исправлен;
  }
}
@media screen и (min-width: 901px) {
  html {
    фон: url ('large_bg.jpg ') центральный центр без повтора исправлен;
  }
}
html {
  размер фона: обложка;
  -webkit-background-size: обложка;
  -o-background-size: обложка;
  -moz-background-size: обложка;
}
  

Запретить загрузку фона скрытых элементов

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

  
@media screen и (max-width: 480 пикселей) {
  html {
    фон: нет;
  }
}  

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

Об авторе

Пунит Сетхи работает с крупными сайтами электронной коммерции и B2C над повышением скорости и масштабируемости их сайтов. Он часто пишет здесь в Твиттере.

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

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

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

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

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

Но какой размер изображения будет достаточно большим? Мониторы и операционные системы быстро развивались, и в результате появился широкий диапазон доступных разрешений экрана.Самые популярные сегодня разрешения — 1024×768 пикселей, 1280×800 пикселей, 1280×1024 пикселей и 1440×900 пикселей. Однако с появлением экранов высокой четкости (1920×1080 пикселей) и профессиональных дисплеев, поддерживающих разрешение до 2560×1600 пикселей, возможно практически все.

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

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

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

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

Уровень 3 модуля W3C CSS Background and Borders Module (в настоящее время — рабочий проект) определяет свойство 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;
  }
} 
 

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

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

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

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

Изменить размер флага — Weglot

Поскольку Weglot сгруппировал все флаги в файле (CSS Sprite) для повышения производительности, изменить размер флага на вашем веб-сайте может быть непросто.

1-й шаг: С помощью инспектора кода браузера найдите свойства CSS, которые задают размер глобальных флагов. Это зависит от настроек ваших флагов. В этом примере (настройка: круговые флаги) найденные свойства CSS:

 
 .weglot-flags.flag-3 a :: before, 
 
.weglot-flags.flag-3 span :: before {
 
 background-image: url ("../ images / round_flag.png"); 
 
 width: 24px! Important; 
 
 height: 24px! Important; 
 
 -webkit-background-size: авто 24px! Важно; 
 
 background-size: auto 24px! Important; 
 
} 
 

Переопределить width , height и background-size свойств с требуемым размером.

2-й шаг: Для каждого флага найдите его свойства background-position и переопределите его.В этом примере свойства background-position :

 
 .weglot-flags.flag-3.en> a :: before, 
 
 .weglot-flags.flag-3.en> span :: before {
 
 background-position: -2520px 0! Important; 
 
} 
 
 
 
 .weglot-flags.flag-3.pt> a :: before, 
 
 .weglot-flags.flag-3.pt> span :: before {
 
 background-position: -4344px 0! Важно; 
 
} 
 

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

Новое положение фона = (Требуемый размер / размер по умолчанию) * текущее положение фона

Пример 1: Наименьшие флаги

Тип флагов: Круг
Языки: английский и португальский
Требуемый размер: 16px * 16px

 
 .weglot-flags.flag-3.en> a :: before, 
 
 .weglot-flags.flag-3.en> span :: before {
 
 background-position : -1680px 0! Важно; 
 
} 
 
 
 
.weglot-flags.flag-3.pt> a :: before, 
 
 .weglot-flags.flag-3.pt> span :: before {
 
 background-position: -2896px 0! important; 
 
} 
 
 
 
 .weglot-flags.flag-3 a :: before, 
 
 .weglot-flags.flag-3 span :: before {
 
 width: 16px! Important; 
 
 высота: 16 пикселей! Important; 
 
 -webkit-background-size: авто 16px! Важно; 
 
 размер фона: авто 16 пикселей! Важно; 
 
} 
 

Расчет для английского флага: (16/24) * — 2520 = -1680
Расчет для португальского флага: (16/24) * — 4344 = -2896

Тип флага: Круг
Языки: английский и португальский
Требуемый размер: 48 пикселей * 48 пикселей

 
.weglot-flags.flag-3.en> a :: before, 
 
 .weglot-flags.flag-3.en> span :: before {
 
 background-position: -5040px 0! important; 
 
} 
 
 
 
 .weglot-flags.flag-3.pt> a :: before, 
 
 .weglot-flags.flag-3.pt> span :: before {
 
 background-position: -8688px 0! Важно; 
 
} 
 
 
 
 .weglot-flags.flag-3 a :: before, 
 
 .weglot-flags.flag-3 span :: before {
 
 width: 48px! Important; 
 
 высота: 48 пикселей! Important; 
 
 -webkit-background-size: авто 48px! Важно; 
 
 размер фона: авто 48 пикселей! Важно; 
 
} 
 

Расчет для английского флага: (48/24) * — 2520 = -5040
Расчет для португальского флага: (48/24) * — 4344 = -8688

Размер фона CSS propriété | ZONE CSS

Определение размера фона CSS

.

Собственный план Аррьера CSS background-size Permet из модификатор хвоста нашего изображения в плане в интерьере зоны зоны план специальный для собственного использования Css фоновый клип . Изображение должно быть объявлено с собственным CSS background-image или background .

Пример синтаксиса CSS background-size :

   background-size : contain;
  размер фона : обложка;
  размер фона : авто;
  background-size : 10px 50%;
  background-size : 50% авто;  

Собственный стиль стиля Размер фона CSS peut prendre une / des valeurs de taille:

• auto : la taille de l’image d’arrière-plan sa taille initiale . Valeur par défaut , revient mettre auto auto .
• содержат : la taille de l’arrière-plan s’adapte à la taille de la zone d’arrière plan sans deformation.
• крышка : la taille de l’image de fond couvre toute la large et la hauteur de la zone d’arrière plan sans déformation. L’image de fond peut être rognée si elle est plus grande.
• номер номера : два номера положительного единого объекта CSS долгого времени, являются представителем в нижнем белье: длинный образ плана и высокое изображение его плана.Si l’unité est en pourcentage (% ), la valeur est calcée en fonction de la taille de la zone d’arrière-plan.
  номер peut aussi prendre la valeur de « auto «. Если вы не встретили никаких номеров, вы можете просмотреть два идентификатора номеров

Пример кода background-size CSS

Условия применения CSS

background-size .

Собственный CSS background-size Применимо sur toutes les balises (X) HTML — это план изображения.

La valeur de la CSS background-size peut être mise directement dans la propriété de raccourci CSS background .

Problème d’interprétation de

background-size en Css.

Собственная собственность стиля background-size CSS n’est pas reconnue par les anciens navigateurs.

Условия анимации

background-size en CSS3.

La CSS background-size — это собственный стиль стиля , который используется для анимаций CSS и переходов CSS .

В кадре из изображений-планов, кратных , в режиме ожидания изображения в Css background-image spécifier la taille в background-size .