Резиновая шапка, адаптированная шапка, адаптивный фон или еще как-нибудь по другому все, то что необходимо для адаптивного фона. В этом уроке я покажу как адаптировать фоновое изображение под различные виды устройств. 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;
	}
}

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

Выкладываю готовый пример. Скачать