Посмотрите на популярные сегодня веб-сайты, и вы обязательно увидите большие фоновые изображения, занимающие весь экран. Одна из проблем с добавлением этих изображений связана с передовой практикой, согласно которой веб-сайты должны реагировать на различные размеры экрана и устройства - подход, известный как адаптивный веб-дизайн.
Одно изображение для многих экранов
Поскольку макет вашего веб-сайта изменяется и масштабируется в зависимости от размера экрана, эти фоновые изображения также должны масштабироваться соответствующим образом. Фактически, эти «плавные изображения» являются одним из ключевых элементов отзывчивых веб-сайтов (наряду с плавной сеткой и медиа-запросами). Эти три элемента с самого начала были основой адаптивного веб-дизайна, но, несмотря на то, что всегда было довольно легко добавить адаптивный веб-дизайн. встроенные изображения на сайт (встроенные изображения - это графика, закодированная как часть разметки HTML), то же самое с фоновыми изображениями (которые стилизованы на странице с использованием свойств фона CSS) уже давно является серьезной проблемой для многих веб-дизайнеров и пользователей интерфейса. Разработчики. К счастью, это стало возможным благодаря добавлению свойства background-size в CSS.
В отдельной статье мы рассказали, как использовать CSS3 свойство background-size чтобы растянуть изображения до размеров окна, но есть еще лучший и более удобный способ развертывания для этого свойства. Для этого мы будем использовать следующую комбинацию свойства и значения:
размер фона: обложка;
Свойство ключевого слова cover указывает браузеру масштабировать изображение по размеру окна, независимо от того, насколько большим или маленьким становится это окно. Изображение масштабируется, чтобы покрыть весь экран, но исходные пропорции и соотношение сторон остаются неизменными, что предотвращает искажение самого изображения. Изображение размещается в окне как можно больше, чтобы покрыть всю поверхность окна. Это означает, что на вашей странице не будет пустых пятен или искажений на изображении, но это также означает, что часть изображения может быть обрезана в зависимости от соотношения сторон экрана и изображения в вопрос. Например, края изображения (верхний, нижний, левый или правый) могут быть обрезаны на изображениях, в зависимости от того, какие значения вы используете для свойства background-position. Если вы сориентируете фон «вверху слева», любые излишки на изображении исчезнут с нижней и правой сторон. Если вы центрируете фоновое изображение, излишки снимутся со всех сторон, но, поскольку излишки растянуты, воздействие на любую из сторон будет меньше.
Как использовать 'background-size: cover;'
При создании фонового изображения рекомендуется создать изображение достаточно большого размера. Хотя браузеры могут уменьшать изображение без заметного влияния на качество изображения, когда браузер увеличивает размер изображения, изображение до размера, превышающего его исходные размеры, визуальное качество ухудшится, станет размытым и пиксельный. Обратной стороной этого является то, что ваша страница снижает производительность, когда вы доставляете гигантские изображения на все экраны. Когда вы это сделаете, убедитесь, что правильно подготовить эти изображения для скорости загрузки и доставки в Интернет. В конце концов, вам нужно найти золотую середину между достаточно большим размером и качеством изображения и разумным размером файла для скорости загрузки.
Один из распространенных способов масштабирования фоновых изображений - это когда вы хотите, чтобы изображение занимало весь фон страницы, является ли эта страница широкой и просматривается на настольном компьютере или намного меньше и отправляется на карманный, мобильный устройств.
Загрузите изображение на свой веб-хостинг и добавьте его в свой CSS в качестве фонового изображения:
фоновое изображение: URL (fireworks-over-wdw.jpg);
фон-повтор: без повторения;
background-position: center center;
background-attachment: исправлено;
Сначала добавьте браузер с префиксом CSS:
-webkit-background-size: обложка;
-moz-background-size: обложка;
-o-background-size: обложка;
Затем добавьте свойство CSS:
размер фона: обложка;
Использование разных изображений для разных устройств
Хотя адаптивный дизайн для настольного компьютера или ноутбука важен, разнообразие устройств которые могут получить доступ к Интернету, значительно расширились, и большее разнообразие размеров экрана поставляется с что.
Как уже упоминалось ранее, загрузка очень большого адаптивного фонового изображения на смартфон, например, не является эффективным или не учитывает пропускную способность.
Узнайте, как можно использовать медиа-запросы для предоставления изображений, соответствующих устройствам, на которых они будут отображаться, и дальнейшего улучшения совместимости вашего веб-сайта с мобильными устройствами.