Изображения являются важной частью привлекательного дизайна сайта . Это включает в себя использование фоновых изображений. Это изображения и графика, которые используются за областями страницы, в отличие от изображений, представляемых как часть страниц содержимого. Эти фоновые изображения могут добавить визуальный интерес к странице и помочь вам получить визуальный дизайн, который вы можете искать на странице.
Если вы начнете работать с фоновыми изображениями, вы, несомненно, столкнетесь со сценарием, в котором вы хотите, чтобы изображение растягивалось по размеру страницы. Это особенно актуально для адаптивных веб-сайтов, которые доставляются на самые разные устройства и размеры экрана .
Это желание растянуть фоновое изображение является очень распространенным желанием для веб-дизайнеров, потому что не каждое изображение вписывается в пространство веб-сайта. Вместо того, чтобы устанавливать фиксированный размер, растяжение изображения позволяет ему сгибаться, чтобы соответствовать странице независимо от ширины или ширины окна браузера .
Современный Путь
Лучший способ растянуть изображение, чтобы оно соответствовало фону элемента, — это использовать свойство CSS3 для background-size и установить его равным cover .
div {
background-image: url ('background.jpg');
размер фона: обложка;
повторение фона: без повтора;
}
Посмотрите на этот пример в действии. Вот HTML-код на картинке ниже.
Теперь взгляните на CSS. Это не сильно отличается от кода выше. Есть несколько дополнений, чтобы сделать его более понятным.
Теперь это результат в полноэкранном режиме.
Установив background-size для cover , вы гарантируете, что браузеры автоматически масштабируют фоновое изображение, даже большое, чтобы охватить всю область HTML-элемента, к которому он применяется. Посмотрите на более узкое окно.
Согласно caniuse.com , этот поддерживается более девяноста процентами браузеров, что делает его очевидным выбором в большинстве ситуаций. Это создает некоторые проблемы с браузерами Microsoft, поэтому может потребоваться запасной вариант
Запасной путь
Вот пример, который использует фоновое изображение для тела страницы и устанавливает размер на 100%, чтобы он всегда растягивался по размеру экрана. Этот метод не идеален, и он может привести к некоторому непокрытому пространству, но с помощью свойства background-position вы сможете устранить проблему и по-прежнему использовать старые браузеры.
body {
background: url ('bgimage.jpg');
повторение фона: без повтора;
размер фона: 100%;
background-position: center;
}
Используя приведенный выше пример с установленным значением background-size равным 100% , вы можете видеть, что CSS выглядит в основном одинаково.
Результат в полноэкранном браузере или браузере с размерами, подобными изображению, практически идентичен. Однако при более узком экране недостатки начинают проявляться.
Понятно, что это не идеально, но это будет работать как запасной вариант.
Согласно caniuse.com , это свойство работает в IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ и во всех основных мобильных браузерах. Это распространяется на все современные браузеры, доступные сегодня, что означает, что вы должны использовать это свойство, не опасаясь, что оно не будет работать на чьем-либо экране.
Между этими двумя методами у вас не должно возникнуть проблем с поддержкой почти всех браузеров. Поскольку background-size: cover получает еще большее признание среди браузеров, даже этот запасной вариант станет ненужным. Очевидно, что CSS3 и более гибкие методы проектирования упростили и упростили, используя изображения в качестве адаптивных фонов в элементах HTML.