Большой размер фона, пожалуйста! CSS. Спасают положение CSS3 фоны

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

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

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

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

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

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

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

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

Background-size: 100px 200px;

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

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

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

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

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

Background-size: 50% auto;

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

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

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

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

Background-size: contain;

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

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

Background-size: cover;

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

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

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

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

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

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

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

Body { background: #000 url(myBackground_1280x960.jpg) » center center fixed no-repeat; }

Пример 1 показывает отцентрированное фоновое изображение 1280px X 960px , где видимая область зафиксирована (то есть она не прокручивается вместе с документом).

Но какого размера необходимо изображение? Мониторы и операционные системы развиваются достаточно быстро, и как результат мы имеем большой диапазон экранных разрешений. Наиболее популярные разрешения сегодня: 1024x768px , 1280x800px , 1280x1024px , и 1440x900px . Однако с появлением HD мониторов и профессиональных дисплеев, которые поддерживают разрешение до 2560x1600px , вариантов становится еще больше.

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

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

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

Спасают положение CSS3 фоны

W3C CSS определяет свойство background-size , которое отвечает нашим запросам.

Интересные значения:

Contain

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

Cover

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

Contain В этом случае изображение полностью поместится в браузере , опуская (скрывая) непрозрачные поля у верхней-нижней или левой-правой стороны, когда пропорции у фонового изображения и окна браузера не совпадают (в примере образуются пустое черное пространство). В результате изображения выглядит "обрезанным ". В примере 2 код примера 1 был дополнен свойством background-size со значением Contain .

Cover . В этом случае изображение полностью заполнит смотровое окно , при этом в процессе будут отрезаны «уши» или «волосы» (они уйдут за пределы монитора), но визуально изображение не будет выглядеть "обрезанным". Данный метод я предпочитаю всем остальным. Вы можете контролировать выравнивание изображения внутри окна с помощью свойства background-position . В примере 3 мы снова дополнили код примера 1 , но на этот раз свойством background-size со значением cover .

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

Body { background: #000 url(myBackground_1280x960.jpg) » center center fixed no-repeat; -moz-background-size: cover; background-size: cover; }

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

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

Добавим CSS3 media queries

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

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

Body { background: #000 url(myBackground_1280x960.jpg) » center center fixed no-repeat; -moz-background-size: cover; background-size: cover; }
@media only all and (max-width: 1024px) and (max-height: 768px) { body { -moz-background-size: 1024px 768px; background-size: 1024px 768px; }
}

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

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

background-position значение равно left-bottom.

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

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

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

Значения имеют следующие значения:

"содержит

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

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

Я, вероятно, немного толстый, но может ли кто-нибудь дать мне простое объяснение на английском языке с относительными примерами?

6 ответов

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

Примечание: Aspect ratio = width / height

Содержит

if (aspect ratio of container > aspect ratio of image) image-height = container height image-width = aspect-ratio-preserved width else image-width = container width image-height = aspect-ratio-preserved height

Обложка

if (aspect ratio of container > aspect ratio of image) image-width = container width image-height = aspect-ratio-preserved height else image-height = container height image-width = aspect-ratio-preserved width

Вы видите отношение? В обоих случаях cover и contain соотношение сторон сохраняется. Но условия if - else обращаются в обоих случаях.

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

Q. Могут ли они быть заменены процентами?

Нет, не просто по процентам. Вам потребуется кондиционирование.

Q. В каких ситуациях я должен выбирать один за другим?

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

contain , с другой стороны, можно использовать, когда вы используете повторяющийся фон (например, когда у вас есть образ изображения с очень высоким коэффициентом пропорции по veiwport/container, вы можете использовать contain и установите background-repeat в repeat-y). Но более подходящее использование для contain будет для фиксированного элемента height/width.

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

background-size: contain гарантирует, что все фоновое изображение будет соответствовать фоновой области, сохраняя исходное соотношение сторон. Если область фона меньше, чем изображение, изображение будет уменьшаться, так что оно может соответствовать области фона. Если область фона выше или выше изображения, то любые части области, не занятые основным изображением, будут заполняться повторами изображения или почтовых ящиков /whitespace, если для параметра background-repeat установлено значение no-repeat .

background-size: cover делает фоновое изображение настолько большим, насколько возможно, чтобы оно заполнило всю область фона, не оставляя пробелов. Разница между cover и 100% 100% заключается в том, что соотношение сторон изображения сохраняется, поэтому не происходит неестественного растяжения изображения.

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

Итак, когда вы используете один над другим? Лично я считаю, что cover имеет более практическое применение, чем contain , поэтому я пойду первым. 1

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

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

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

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

Html { height: 100%; background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } body { width: 80%; min-height: 100%; background-color: rgba(255, 255, 255, 0.5); margin: 5em auto; padding: 1em; }

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

background-size: содержать

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

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

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

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

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

Управлением размером отвечает свойство background-size , в качестве значения можно указывать ключевое слово cover , тогда размер изображения будет такой, чтобы его ширина и высота поместились в заданную область (например, окно веб-страницы); ключевое слово contain масштабирует картинку так, чтобы хотя бы одна сторона картинки целиком поместилась в заданную область. Кроме того, допустимо указывать явные размеры по горизонтали или вертикали в процентах или других единицах CSS. На рис. 1 показано изменение размеров изображений при разных значениях background-size . Серым цветом выделен блок размером 280х200 пикселей, внутри которого устанавливается фон.

Рис. 1. Вид фоновых картинок в зависимости от значения background-size

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

В примере 1 устанавливается фоновая фотография, которая занимает всё окно браузера.

Пример 1. Фоновая картинка

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

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

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

Данный трюк заключается в установке значения в процентах отступам (padding ) элемента. Впервые способ опубликован в старой статье блога A List Apart , однако он до сих пор хорошо работает.

Предположим, что есть фоновое изображение 800 на 450 пикселей, и нужно сделать его фоном с фиксированным соотношением сторон - 16:9. В коде ниже для отступов используется px , но все будет работать и с em . Также есть HTML5 элемент figure, для его корректной работы в старых браузерах можно использовать HTML5 shiv .

Div.column { max-width: 800px; } figure.fixedratio { padding-top: 56.25%; /* 450px/800px = 0.5625 */ }

Добавляем фон

Полученный элемент масштабируется как надо, но если добавить фоновое изображение, результат будет не очень хорошим. Используем атрибут background-size: cover . К сожалению, в Internet Explorer 8 такой способ не работает. Чтобы решить эту проблему, позиционируем фон с помощью background-position . Фоновая картинка должны быть по ширине как минимум равна max-width элемента. В обратном случае картинка будет обрезаться.

Div.column { /* The background image must be 800px wide */ max-width: 800px; } figure.fixedratio { padding-top: 56.25%; /* 450px/800px = 0.5625 */ background-image: url(http://voormedia.com/examples/north-sea-regatta.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ }

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

Например картинка шириной 800 на 200 пикселей (4:1) на маленьком экране, при ширине в 300 пикселей, должна уменьшаться до 150 пикселей (2:1). Посчитаем атрибуты height и padding-top :

На рисунке показано соотношение сторон фонового изображения при разной ширине. Наклон графика (slope) соответствует атрибуту padding-top , начальная высота (start height) - атрибуту height . В итоге получается код:

Div.column { /* The background image must be 800px wide */ max-width: 800px; } figure.fluidratio { padding-top: 10%; /* slope */ height: 120px; /* start height */ background-image: url(http://voormedia.com/examples/amsterdam.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ }

Использование SCSS для расчета

Атрибуты padding-top and height можно рассчитывать автоматически при помощи препроцессоров, например SCSS . Пример этого:

/* Calculate fluid ratio based on two dimensions (width/height) */ @mixin fluid-ratio($large-size, $small-size) { $width-large: nth($large-size, 1); $width-small: nth($small-size, 1); $height-large: nth($large-size, 2); $height-small: nth($small-size, 2); $slope: ($height-large - $height-small) / ($width-large - $width-small); $height: $height-small - $width-small * $slope; padding-top: $slope * 100%; height: $height; background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ } figure.fluidratio { /* This element will have fluid ratio from 4:1 at 800px to 2:1 at 300px. */ @include fluid-ratio(800px 200px, 300px 150px); background-image: url(http://voormedia.com/examples/amsterdam.jpg); }