Css размер background image: background-size | htmlbook.ru

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

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

  background-size: auto auto;
  

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

  background-size: 250px auto;
  

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

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

  
  
  
  

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

  
  
  
  

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

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

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

background-size: 300px 300px;

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

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

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

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

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

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

Размеры в SVG • Про CSS

Управление размерами — тема важная, и чтобы максимально использовать возможности SVG, нужно хорошо понимать как всё работает.

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

Вьюпорт

Содержимое SVG-элемента отрисовывается на бесконечном холсте и может быть сколь угодно большого размера, но видимая часть холста соответствует размерам SVG-элемента. Эта область отрисовки называется viewport (вьюпорт).

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

Если просто вставить SVG на страницу и не задавать ему никакие размеры, он отобразится размером 300px на 150px, что не поместилось — обрежется:

Ширина и высота

Шириной и высотой элемента можно управлять стандартными свойствами width и height:

<svg>
  ...
</svg>

Их можно задавать как атрибутами, так и в CSS:

.mysvg {
  width: 350px;
  height: 200px;
}

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

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

viewBox

Похожим образом не изменяя размеры содержимого ресайзится iframe, но в случае с SVG это поведение можно изменить, если определить размеры области с помощью свойства viewBox:

<svg
    viewBox="0 0 180 180">
  ...
</svg>

Первые два значения — координаты X и Y верхнего левого угла отображаемой области, последние два — ширина и высота. viewBox задаётся только атрибутом.

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

viewBox можно использовать, например, для кадрирования изображения, чтобы показывать не всю картинку, а только какую-то её часть:

Это очень простое демо, вот пример посложнее от Sarah Drasner.

Интересно, что если у SVG нет размеров, но задан viewBox, изображение займёт собой всё доступное пространство:

<svg viewBox="0 0 180 180">
  ...
</svg>

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

preserveAspectRatio

Как мы видели в примере выше, если у SVG заданы размеры и viewBox, содержимое будет сжиматься и растягиваться с сохранением пропорций, чтобы поместиться целиком, но этим поведением тоже можно управлять — с помощью свойства preserveAspectRatio (оно задаётся только атрибутом).

Например, с помощью значения none можно указать, что сохранять пропорции не нужно:

<svg
    viewBox="0 0 180 180"
    preserveAspectRatio="none"
    >
  ...
</svg>

SVG с viewBox и preserveAspectRatio='none' ведёт себя очень похоже на img: при изменении размеров содержимое масштабируется под размеры вьюпорта не сохраняя пропорции.

none будет полезно для резиновых фонов:

Остальные значения preserveAspectRatio состоят из двух частей: первая задаёт выравнивание, вторая — поведение элемента относительно вьюпорта.

Выравнивание задаётся одним значением, определяющим положение по вертикали и по горизонтали, например: xMaxYMin. Для обеих осей можно задать положение в начале, в середине и в конце:

xMin, YMin — в начале оси xMid, YMid — в середине xMax, YMax — в конце

Эти значения можно комбинировать в любых сочетаниях, но порядок должен сохраняться: первым всегда идет значение для X, вторым для Y. Значение для Y всегда пишется с большой буквы.

Поведение элемента определяется второй частью preserveAspectRatio. Возможные значения:

meet — содержимое стремится уместиться целиком (как фон с background-size: contain) slice — содержимое заполняет собой всю область видимости (как background-size: cover: что не поместилось, обрежется)

Важно помнить, что preserveAspectRatio не работает без viewBox. viewBox задает область, которая должна масштабироваться, preserveAspectRatio определяет как именно она должна это делать.

Также нужно понимать, что preserveAspectRatio срабатывает, если вьюпорт и вьюбокс имеют разные соотношения сторон. Если соотношения сторон совпадают, и содержимое умещается без полей, preserveAspectRatio работать не будет (в этом случае в нём просто нет необходимости).

Для использования SVG в качестве иконок достаточно viewBox и размеров, но если предполагается делать что-то более сложное, имеет смысл разобраться с единицами измерения и системой координат.

Единицы измерения

Внутри SVG можно использовать em, ex, px, pt, pc, cm, mm, in, проценты, а также единицы системы координат (user space units). Единицы системы координат соответствуют пикселям, поэтому для значений в пикселях единицы измерения указывать не нужно.

Системы координат

В SVG-документе есть две системы координат:

1. Система координат области отрисовки — viewport space.
2. Система координат содержимого — user space.

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

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

Поизменяйте размеры элемента и посмотрите что происходит с системой координат содержимого (она показана бирюзовым):

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

Масштабирование единиц измерения хорошо видно на примере обводки: изначально её толщина равна единице, но при изменении размеров видимая толщина обводки будет изменяться вместе с фигурой:

Если такое поведение нежелательно, это можно исправить с помощью свойства vector-effect со значением non-scaling-stroke, оно добавляется к содержимому SVG:

<circle r="60" cx="75" cy="75"
  stroke="black" stroke-width="1"
  vector-effect="non-scaling-stroke"/>

vector-effect можно задавать как атрибутом, так и в CSS.

Также новая система координат создается при добавлении трансформаций:

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

Тема может выглядеть сложной, но на самом деле, достаточно немного поиграться с кодом, и всё станет понятно. Для лучшего понимания систем координат, размеров и трансформаций в SVG рекомендую демо Сары Суайдан, а также её статьи:

HTML Стиль DOM Style backgroundSize Свойство

❮ Объект стиля

Пример

Укажите размер фонового изображения:

document. getElementById («myDIV»). style.backgroundSize = «60px 120px»;

Определение и использование

Свойство backgroundSize устанавливает или возвращает размер фоновых изображений.

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Числа, за которыми следуют Webkit, Moz или O, указывают первую версию, которая работала с префиксом.

Синтаксис

Вернуть свойство backgroundSize:

объект .style.backgroundSize

Установите свойство backgroundSize:

объект . style.backgroundSize = «auto | length | cover | contain | intial | inherit»

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

Значение	Описание
авто	Значение по умолчанию. Фоновое изображение содержит его ширину и высоту
длина	Устанавливает ширину и высоту фонового изображения.Первое значение устанавливает ширину, второе значение устанавливает высоту. Если указано только одно значение, для второго устанавливается значение «авто»
в процентах	Устанавливает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение устанавливает ширину, второе значение устанавливает высоту. Если указано только одно значение, для второго устанавливается значение «авто»
крышка	Масштабируйте фоновое изображение как можно больше, чтобы фоновая область полностью покрывалась фоновым изображением. Некоторые части фонового изображения могут быть не видны в области позиционирования фона
содержат	Масштабировать изображение до максимального размера, чтобы его ширина и высота могли уместиться внутри области содержимого.
начальный	Устанавливает для этого свойства значение по умолчанию. Читать про начальные
унаследовать	Наследует это свойство от своего родительского элемента. Читать про наследство

Технические характеристики

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

Ссылка CSS: свойство background-size

Изменение размера фоновых изображений с помощью background-size — CSS: Cascading Style Sheets

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

Давайте рассмотрим большое изображение, изображение логотипа 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;
  цвет: розовый;
}
  

Результат

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

  размер фона: 300 пикселей 150 пикселей;
  

Результат выглядит так:

На другом конце спектра вы можете увеличить изображение на заднем плане. Здесь мы масштабируем значок 32×32 пикселей до 300×300 пикселей:

  .square2 {
  фоновое изображение: URL (favicon.png);
  размер фона: 300 пикселей;
  ширина: 300 пикселей;
  высота: 300 пикселей;
  граница: сплошная 2px;
  тень текста: белый 0px 0px 2px;
  размер шрифта: 16 пикселей;
}
  

Как видите, CSS фактически идентичен, сохраните имя файла изображения.

Помимо значений , свойство CSS background-size предлагает два специальных значения размера: содержит и cover .Давайте посмотрим на них.

содержат

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

HTML

  

  
 Попробуйте изменить размер этого элемента! 

  

CSS

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

Результат

крышка

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

HTML

  

  
 Попробуйте изменить размер этого элемента! 

  

CSS

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

Результат

background-size — CSS: Cascading Style Sheets

Свойство 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 равен contain or cover : При сохранении внутренних пропорций изображение визуализируется с наибольшим размером, содержащимся в области позиционирования фона или покрывающей ее. Если изображение не имеет внутренних пропорций, оно отображается с размером области позиционирования фона.
• Если размер фона равен авто или авто авто :
  • Если изображение имеет как горизонтальные, так и вертикальные внутренние размеры, оно отображается с этим размером.
  • Если изображение не имеет внутренних размеров и внутренних пропорций, оно отображается с размером области позиционирования фона.
  • Если изображение не имеет внутренних размеров, но имеет внутренние пропорции, оно отображается так, как если бы вместо этого было указано , содержащее .
  • Если изображение имеет только одно внутреннее измерение и внутренние пропорции, оно отображается с размером, соответствующим этому одному измерению. Другое измерение вычисляется с использованием указанного размера и внутренних пропорций.
  • Если изображение имеет только одно внутреннее измерение, но не имеет внутренних пропорций, оно отображается с использованием указанного размера и другого измерения области позиционирования фона.

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

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

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

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

Если вы используете <градиент> в качестве фона и указываете background-size , чтобы использовать его, лучше не указывать размер, который использует один компонент auto или указывается только с использованием значения ширины ( например, размер фона: 50% ). Отрисовка s в таких случаях изменена в 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, без зная точный размер элемента, фон которого указывается.

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

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

Давайте рассмотрим большое изображение, изображение логотипа 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 загружаются только в браузере

Лучшие размеры полноэкранного фонового изображения для веб-дизайна

Последнее обновление: 30.04.2019

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

Обычно задается следующий вопрос:

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

Я уже рассматривал этот вопрос на сайтах, которые я разработал, таких как Kona Boys, BAS1S Architecture & Design, Mountain Girl Fitness, где используются ползунки с полноразмерными фоновыми изображениями. Итак, когда мне в последний раз задавали этот вопрос, я подумал, что найду время, чтобы формализовать свой ответ (первоначально в конце 2012 года).

Краткий ответ

• Я рекомендую 1920 x 1080 или меньше с соотношением сторон 16: 9, что составляет 1,777 к 1. (до мая 2014 г. я рекомендовал 1440 x 900).
• Чтобы это произошло, я рекомендую использовать медиа-запросы для выбора изображения подходящего размера из пула, состоящего из 2 или 3 размеров.

Длинный ответ

Почему это важно

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

В последнее время полноэкранные слайдеры и фоны стали чрезвычайно популярными в целом, особенно в «плоском» дизайне.

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

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

Некоторые примеры (на момент написания оригинала)

Вот несколько примеров веб-сайтов крупных корпораций, использующих полноэкранные фоновые изображения:

Вот несколько реализаций полной ширины и частичной высоты:

Вот несколько списков других сайтов, на которые стоит обратить внимание:

Разрешение экрана настольного компьютера и ноутбука

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

Когда дело доходит до разрешения экрана, наиболее популярными разрешениями для настольных ПК, планшетов и консолей (не мобильных) в настоящее время (30 апреля 2020 г. ) в Северной Америке являются:

• 1920 x 1080 (соотношение 1,78: 1)
• 1366 x 768 (соотношение 1,78: 1)
• 1440 x 900 (соотношение 1,6: 1)
• 15368 x 864 (соотношение 1,78: 1)
• 1600 x 900 (соотношение 1,78: 1)
• 1280 x 800 (1.Соотношение 6: 1)
• 768 x 1024 (соотношение 0,75: 1)
• 1024 x 768 (соотношение 1,33: 1)

Источник: StatCounter Global Stats — Доля рынка разрешения экрана

1920 x 1080 и другие профессиональные дисплеи monster , поддерживающие разрешение до 2560 x 1600, становятся все более и более распространенными … возможно, наши глаза плохо себя чувствуют, или мы просто пытаемся впитать как можно больше радиации.

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

Что продают

Быстрый поиск в Walmart или Amazon компьютеров, проданных с мониторами, показывает, что большинство новых портативных компьютеров или новых мониторов:

• 19,5 ″, 1600 x 900, 16: 9 (от 1,78 до 1)
• 20 дюймов, 1600 x 900, 16: 9 (от 1,78 до 1)
• 21,5 дюйма, 1920 x 1080, 16: 9 (от 1,78 до 1)

Обратите внимание на соотношение сторон 16: 9 (1,78: 1), которое повысит популярность и количество пользователей в течение следующего десятилетия. Обратите внимание, что 16: 9 — это стандартизированный размер дисплея HDTV 720p / 1080i, который «поддерживает HD».”

Мобильные устройства

С другой стороны, есть мобильные устройства с гораздо меньшим разрешением — 800 x 480 для Samsung, 320 x 480 для iPhone — в дополнение к максимальным ограничениям на размер изображения, прежде чем что-то сломается. Здесь есть хороший длинный список разрешений экрана мобильных устройств. Кроме того, здесь есть хороший краткий справочник только по разрешениям iOS.

Совет по экономии времени и разочарований: максимальный размер изображений для правильного отображения на iPad 1 — iPad 4 составляет 1024 x 1024 x 3 = 3 145 728.

Вот цифры StatCounter для наиболее часто используемых размеров мобильных экранов в Северной Америке.

• 320 x 568
• 360 x 640
• 375 х 667

Источник: StatCounter Global Stats Разрешение экрана мобильных устройств в Северной Америке

Вот мой собственный список разрешений мобильных экранов, которые я учитываю при разработке сайта:

короткая сторона	длинная сторона	передаточное отношение	, пример
240	320	1. 33	SDK для Android
320	480	1,50	iPhone
360	640	1,78	Nokia nHD
480	554	1,15	Motorola Droid
480	800	1,67	Samsung Галактика
600	800	1,33	разжечь 3
640	960	1.50	iPhone 4
768	1024	1,33	iPad 1–4, много компьютеров
768	1366	1,78	самые новые десктопы
800	1280	1,60	старые настольные компьютеры
875	1400	1,60
900	1350	1,50
900	1440	1. 60	десктопов за последние 5 лет
900	1600	1,78	большинство мониторов 20 ″
960	1280	1,33
1080	1920	1,78	большинство 23-дюймовых мониторов
1200	1733	1,44
1328	2000	1,51
1600	2560	1.60

Устройства Retina

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

, такие как iPad 3-го поколения и новее, iPhone 4 и новее, и многие другие, используют больше пикселей на дюйм, чем стандартный экран (вот некоторые полезные подробности из Википедии).Из-за этого изображения стандартного размера выглядят немного нечеткими при просмотре на экранах с высокой плотностью пикселей. Веб-разработчики преодолевают это, создавая изображения, которые в два раза больше обычных, а затем отображают их вдвое меньшего размера. Конечным результатом является изображение того же размера, что и вы изначально, но оно отлично смотрится как на стандартных экранах, так и на экранах высокой плотности.

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

Я провел небольшое исследование, используя apple.com/iphone, и они справились с этим, просто удвоив размер своих фоновых изображений при трех разных разрешениях экрана. См. Это обсуждение в комментариях ниже для получения полной информации и кода CSS.

Apple выбрала эти для устройств без Retina:

• 1440px x 678px для экранов 1024 и выше
• 1068px x 648px для менее чем 1024
• 736px x 460px для менее чем 768

Для Retina (с использованием медиа-запросов «-webkit-min-device-pixel-ratio: 1,5 ″) они выбрали:

• 2880px x 1356px для экранов 1024 и выше
• 2136px x 1296px для менее 1024
• 1472px x 920px для менее чем 768

Каждое из фоновых изображений удваивается для Retina.Итак, если вы доверяете Apple как хорошему стандарту, я бы посоветовал пойти вдвойне.

Скорость загрузки / время загрузки страницы

Было проведено несколько более крупных исследований (gomez.com и akamai.com), в которых обсуждается, как время загрузки страницы влияет на продажи. Они заключают, что:

Более медленное время загрузки = недовольные пользователи = меньше продаж

KISSmetrics имеет отличную инфографику с подробностями.

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

Если я знаю, что на странице должны быть большие элементы изображения, я обычно снимаю так, чтобы общий размер всей страницы не превышал 1 МБ.(На мой взгляд, это слишком велико, но все же выполнимо для большинства посетителей сегодня.) Я стараюсь оставлять любое изображение размером менее 100 КБ.

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

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

Реализация

Фиксированный размер против жидкости против адаптивного

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

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

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

На адаптивном сайте, который использует медиа-запросы, вы учитываете вопросы фиксированного размера, но имеете карточку «выйти из тюрьмы бесплатно»… ну, может быть, и не «бесплатно».’С помощью медиа-запросов у вас будет возможность поменять фоновое изображение (-я), чтобы оно точно соответствовало потребностям каждого размера экрана, который вам нужен. Создание фоновых изображений для экранов нескольких определенных размеров может потребовать больших усилий, но это означает, что вы можете поддерживать внешний вид сайта так, как вам нравится.

CSS и JavaScript

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

• • • CSS3: background-size: cover
    • CSS3: размер фона: содержат
    • CSS применен к : width: 100%; высота: авто; минимальная высота: 100%; минимальная ширина: 1440 пикселей
    • CSS применен к : top: 0; слева: 0; положение: фиксированное; минимальная ширина: 100%; минимальная высота: 100%;
    • jQuery: См. Статью
    о трюках CSS.

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

Специальное примечание для реализации слайдера

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

Рекомендации по проектированию

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

Иногда, однако, фоновое изображение интегрируется в дизайн и требует определенного размера и расположения. Скажем, например, что у вас есть большая галочка на фоновом изображении, которая ДОЛЖНА пересекать заголовок в нужном месте.Или, скажем, у вас есть лицо или человек, которые будут выглядеть совершенно неуместно, если их переместить или закрыть элементом переднего плана. В таких случаях у вас гораздо меньше гибкости в выборе размера фонового изображения. Решение по существу продиктовано дизайном, и вы делаете все возможное, чтобы оно подходило. Часто «все, что нужно» — это использовать медиа-запросы для предоставления одного и того же изображения нескольких размеров, чтобы соответствовать разным размерам экрана.

Заключительные мысли

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

• • 1. В совокупности люди, использующие коэффициент 1,6, составляют основную часть текущих пользователей
    2. Растет популярность и доступность формата 16: 9 (соотношение 1,78)
    3. Однако миллионы людей все еще используют старый добрый 1024 x 768 (соотношение 1,33)
    4. Обычно я хочу, чтобы на изображении было видно все — на моих изображениях не часто выбрасываются части
    5. Оптимизированное цветное изображение jpg с разрешением 1440 x 900, по моему опыту, составляет около 100 КБ, что является большим, но не огромным для большинства устройств и сегодняшних скоростей загрузки.

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

Коэффициент 1,6 обычно заставляет мои изображения все отображать при изменении размера, если я работаю на сайте, который не поддерживает соотношение сторон или требует, чтобы часть изображения была перемещена в недоступную для просмотра область. Я выбираю ширину 1440 для размещения большинства новых экранов.

Итак, тогда

• • 1440 x 900 — мое волшебное число для обычных полноэкранных фонов.
  • Если это дизайн с частичной высотой экрана, я оставляю 1440 и делаю любую высоту, которая требуется.
  • Если это полноразмерный фоновый слайдер с более чем 3 или 4 изображениями, я уменьшаю его до 960 x 600, чтобы сэкономить время загрузки без слишком сильного снижения качества изображения, когда они растягиваются.
  • По возможности используйте медиа-запросы для обслуживания из пула из 3 или 4 изображений идеального размера для каждого изображения в фоновом режиме

Оптимизация фоновых изображений CSS с помощью медиа-запросов

5 марта 2020 г. • Обновлено 5 марта 2020 г.

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

Предварительные требования #

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

Знакомство с адаптивными фоновыми изображениями #

Сначала проанализируйте сетевой трафик неоптимизированной демонстрации:

1. Откройте неоптимизированную демонстрацию на новой вкладке Chrome.
2. Нажмите Control + Shift + J (или Command + Option + J на ​​Mac), чтобы открыть DevTools.
3. Щелкните вкладку Сеть .
4. Обновите страницу.

Вы увидите, что единственное запрошенное изображение — это background-desktop.jpg , который имеет размер 1006KB :

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

Вы можете увидеть стили, управляющие фоновым изображением, в style.css:

  body {
 background-position: center center; 
 background-attachment: исправлено; 
 фон-повтор: без повторения; размер фона: обложка; 
 background-image: url (images / background-desktop.jpg); 
}  

Вот значение каждого из используемых свойств:

• background-position: center center : Центрировать изображение по вертикали и горизонтали.
• background-repeat: no-repeat : показать изображение только один раз.
• background-attachment: fixed : Избегайте прокрутки фонового изображения.
• background-size: cover : Измените размер изображения, чтобы покрыть весь контейнер.
• background-image: url (images / background-desktop.jpg) : URL-адрес изображения.

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

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

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

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

Использование медиазапросов — распространенный метод объявления таблиц стилей, которые будут применяться только к определенным типам носителей или устройств.Они реализуются с помощью правил @media, которые позволяют вам определять набор точек останова, в которых определены определенные стили. Когда выполняются условия, определенные правилом @media (например, определенная ширина экрана), будет применена группа стилей, определенных внутри точки останова.

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

• В стиле .css удалить строку, содержащую фоновое изображение URL:

  body {
 background-position: center center; 
 background-attachment: исправлено; 
 фон-повтор: без повторения; размер фона: обложка; 
  background-image: url (images / background-desktop. jpg);  
}  

• Затем создайте точку останова для каждой ширины экрана на основе общих размеров в пикселях, которые обычно имеют экраны мобильных устройств, планшетов и настольных компьютеров:

Для мобильных устройств:

  @media (max-width : 480px) {
 body {
 background-image: url (images / background-mobile.jpg); 
} 
}  

Для планшетов:

  @media (min-width: 481px) и (max-width: 1024px) {
 body {
 background-image: url (images / background-tablet.jpg); 
} 
}  

Для настольных устройств:

  @media (min-width: 1025px) {
 body {
 background-image: url (images / background-desktop.jpg); 
} 
}  

Откройте оптимизированную версию style.css в своем браузере, чтобы увидеть внесенные изменения.

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

Измерение для разных устройств #

Затем визуализируйте получившийся сайт на экранах разных размеров и на смоделированных мобильных устройствах:

1. Откройте оптимизированный сайт на новой вкладке Chrome.
2. Сузьте область просмотра (менее 480 пикселей ).
3. Нажмите Control + Shift + J (или Command + Option + J на ​​Mac), чтобы открыть DevTools.
4. Щелкните вкладку Сеть .
5. Обновите страницу. Обратите внимание на запрос изображения background-mobile.jpg .
6. Расширьте область просмотра. Как только он станет шире 480px , обратите внимание на запрос background-tablet.jpg . Как только он станет шире 1025px , обратите внимание, как запрашивается background-desktop.jpg .

При изменении ширины экрана браузера запрашиваются новые изображения.

В частности, когда ширина ниже значения, определенного в мобильной точке останова (480 пикселей), вы увидите следующий сетевой журнал:

Размер нового мобильного фона на на 67% меньше, чем у рабочего стола.

Сводка #

В этом руководстве вы научились применять медиа-запросы для запроса фоновых изображений, адаптированных к конкретным размерам экрана, и экономии байтов при доступе к сайту на небольших устройствах, например мобильных телефонах. Вы использовали правило @media для реализации адаптивного фона.Этот метод широко поддерживается всеми браузерами. Новая функция CSS: image-set (), может использоваться для той же цели с меньшим количеством строк кода. На момент написания этой статьи эта функция поддерживается не во всех браузерах, но вы можете следить за тем, как развивается принятие, поскольку она может представлять интересную альтернативу этому методу.

Последнее обновление: 5 марта 2020 г. Улучшить статью

Полноэкранное фоновое изображение с CSS

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

Нажмите на изображение для демонстрации полноэкранного фонового изображения

В этом посте я покажу, как мы можем легко размещать такие полноэкранные фоновые изображения на веб-сайтах с помощью CSS3. Этот пример кода должен работать во всех современных браузерах, поддерживающих CSS3 (IE9 +, Chrome, Safari, Opera 10+ и Firefox 3.6+)

Код CSS для полноэкранного фонового изображения

Полноэкранное фоновое изображение обычно размещается как свойство background тега html или body . Ниже мы добавили код CSS в тег body для установки полноэкранного фонового изображения.

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

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

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

Демонстрация полноэкранного фонового изображения

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

Полная демонстрация Полный код

Или поиграйте с CodePen, встроенным ниже:

Поддержка старых браузеров

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

Кредит за использованное фоновое изображение

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

Связанные

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

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

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

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

Размер фона: крышка

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

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

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

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

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

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

Фоны с параллаксом

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

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

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

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

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

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

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

.