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