Фоновое изображение на весь экран
 | |
| Давайте рассмотрим популярных запросов, как нужно правильно растянуть фоновую картинку, которая идет на полную ширину окна браузера на CSS3. И так нам нужно, это выставить или растянуть фоновое изображение, которое может идти картинкой на весь экран монитора или экрана, где не должно быть пробелов и различных отступов и полей, где устанавливаем фиксированный и центрированный фон. Где реально можно все осуществить, а точнее задействовать несколько вариаций. Где нужно задействовать средства, а также все сделать при помощи CSS. Далеко не будем заходить, где разберем все варианты, так, чтоб был выбор при установках или растягивания фоновой картинки. Где можем сделать это исключительно через CSS благодаря background-size свойству теперь в CSS3. Целью здесь является фоновое изображение на веб-сайте, которое постоянно покрывает все окно браузера. Которое должно корректно отображаться, как на больших размерах монитора, так на небольших размерах мобильных экранов или различных гаджет с небольшим обзором. Давайте добавим некоторые особенности: 1. Заполняет всю страницу с изображением, без пробелов; 2. Масштабирует изображение по мере необходимости; 3. Сохраняет пропорции изображения в соотношение сторон; 4. Изображение центрировано на странице; 5. Не вызывает полосы прокрутки; 6. Максимально совместимая с браузерами; 7. Разве это не модные махинации вроде Flash; Это распространяется на все современные браузеры, доступные сегодня, где есть возможность использовать это свойство, не опасаясь, что оно не будет работать на чьем-либо экране мобильного гаджет. Установочный процесс: HTML 1. Вариант: эмулируем фоновое изображение, где такой способ больше подойдет под браузеры, которые не работают на CSS3. Код <html> <head><br><link rel="stylesheet" type="text/css" href="/style.css"><br></head> <body> <img id="background" src="http://zornet.ru/_fr/56/8961241.jpg" /> <div id="body"> Пишем то, что хотите видеть или оставить пустым. </div> </body> </html> CSS Код html, body { margin: 0px; height: 100%; } #background { top: 0; left: 0; position: absolute; width: 100%; height: 100%; } #body { position: absolute; width: 100%; height: 100%; z-index: 1; } Затем изображение будет размещено, сохраняя его пропорции и закрывая видимое окно браузера и мертвую точку этого. Демонстрация  2. Второй вариант: здесь задействуем свойства "background-size" которое прописываем в CSS3, впоследствии ему задаются необходимые значения. <величина> — фоновая картинка в прямом виде по ширине и соответственно по высоте. <процент> — задаем процентное соотношение для ширины и высоты элемента фонового изображения. contain — масштабирования изображений, где идет сохранение по пропорциям, это чтоб и ширина и также высота корректно поместилось внутри. cover — масштабирования изображений, при этом идет сохранение по пропорциям, чтоб ширина и высота полноценно закрывала область. auto — здесь изображение идет в своем оригинальном размере, где масштаб 100%, а если нет то масштабируется, как будто задано значение contain. CSS Код body { background: url(http://zornet.ru/_fr/56/0556657.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } Все это исполнено на чистом стиле, исключительно через CSS3 благодаря, как как можно заметить, для этого есть demo страницы, где сам фон все корректно выводит рисунок на все мобильные размеры. Между этими двумя методами у вас не должно возникнуть проблем с поддержкой почти на всех браузеров. Поскольку background: center fixed получает еще большее признание среди браузеров. Очевидно, что CSS3 и более гибкие методы проектирования упростили и упростили, используя изображения в качестве адаптивных фонов. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |