Резиновая шапка, адаптированная шапка, адаптивный фон или еще как-нибудь по другому все, то что необходимо для адаптивного фона. В этом уроке я покажу как адаптировать фоновое изображение под различные виды устройств. Bootstrap позволяет сделать свой фон для каждого вида дизайна (настольный компьютеры, планшеты, телефоны). Я буду адаптировать фоновое изображение шапки.
Пример того что я хочу сделать.
Реализовать такое перевоплощение фона можно используя css. В Boostrap 3.0 4 уровня адаптации шаблона и для каждого уровня можно подобрать свои параметры (отступы, ширина, высота и прочее).
.otstup{ margin-top:30px; } .shapka{ background:url(../images/shapka3.jpg) center center no-repeat; height:100px; } @media(min-width:768px){ /*Изменения будут внесены только для шаблона шириной свыше 767px*/ .shapka{ background:url(../images/shapka2.jpg) center center no-repeat; height:134px; } } @media(min-width:992px){/*Изменения будут внесены только для шаблона шириной свыше 992px*/ .shapka{ background:url(../images/shapka.jpg) center center no-repeat; height:201px; } } @media(min-width:1200px){/*Изменения будут внесены только для шаблона шириной свыше 1200px*/ .shapka{ background:url(../images/shapka.jpg) center center no-repeat; height:201px; } }
Вся необходимая информация есть в комментариях. Для того чтобы увидеть результат нужно скачать готовый пример и по экспериментировать шириной браузера. При уменьшение ширины браузера фоновое изображение будет тоже уменьшаться.
Выкладываю готовый пример. Скачать
ValueError thrown
Unknown format specifier "a"