Как сделать

Как растянуть фоновое изображение для размещения на веб-странице

Пример HTML для CSS фоновой обложки

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

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

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

Современный Путь

div { 
background-image: url ('background.jpg');
размер фона: обложка;
повторение фона: без повтора;
}

Посмотрите на этот пример в действии. Вот HTML-код на картинке ниже.

Пример HTML для CSS фоновой обложки

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

Пример обложки CSS-фона

Теперь это результат в полноэкранном режиме.

CSS фоновый рисунок полноэкранного рабочего стола

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

CSS фоновая обложка на маленьком экране

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

Запасной путь

Вот пример, который использует фоновое изображение для тела страницы и устанавливает размер на 100%, чтобы он всегда растягивался по размеру экрана. Этот метод не идеален, и он может привести к некоторому непокрытому пространству, но с помощью свойства background-position вы сможете устранить проблему и по-прежнему использовать старые браузеры.

body { 
background: url ('bgimage.jpg');
повторение фона: без повтора;
размер фона: 100%;
background-position: center;
}

Используя приведенный выше пример с установленным значением background-size равным 100% , вы можете видеть, что CSS выглядит в основном одинаково.

CSS фон 100% код

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

CSS 100% фон на маленьком экране

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

Согласно caniuse.com , это свойство работает в IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ и во всех основных мобильных браузерах. Это распространяется на все современные браузеры, доступные сегодня, что означает, что вы должны использовать это свойство, не опасаясь, что оно не будет работать на чьем-либо экране. 

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

Похожие посты
Как сделать

Как получить возмещение за покупки в iTunes или App Store

Как сделать

Поверхностное перо не работает? Вот как это исправить

Как сделать

Как настроить и использовать Fire TV Recast

Как сделать

Как изменить рингтон по умолчанию на вашем iPhone