<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Адаптивное фоновое изображение</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Стили для демо -->
<link rel="stylesheet" href="css/demo.css">
<!-- Стили для адаптивного фонового изображения -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="container">
<section class="content">
<h1>Адаптивное фоновое изображение</h1>
<p class="sub-title"><strong>Изменяйте размер окна браузера</strong> <br /> чтобы увидеть как изменяется фоновое изображение</p>
</section>
</header>
<div id="more-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere sed mi fringilla pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris at ex eget ex ultricies ullamcorper vulputate eu felis. Proin metus nulla, vehicula sit amet aliquam nec, feugiat in elit. </p>
<p>Ut sit amet velit eget ex scelerisque scelerisque. Curabitur laoreet commodo nulla, eu porttitor magna ultricies vel. Aenean in libero dictum, tristique elit vestibulum, porta sapien. Etiam a eros nec nisi varius porta. Morbi pulvinar nisl justo, vitae eleifend ligula hendrerit vitae. Cras ac convallis nibh. In et eros vitae metus elementum vehicula. </p>
<p>Quisque dignissim sollicitudin pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer pellentesque magna erat, vitae placerat lorem hendrerit placerat. Sed aliquet finibus felis, eget egestas urna malesuada eget.</p>
<p>Aenean egestas tortor ac elementum varius. Aenean bibendum tortor gravida ultricies consequat. Nunc quis tincidunt ligula, vitae elementum dui. Vestibulum id sollicitudin ligula, mattis dapibus tortor. Integer convallis libero eu enim maximus vulputate. Morbi vel turpis et est tincidunt malesuada aliquam at augue. </p>
<p>Aenean egestas tortor ac elementum varius. Aenean bibendum tortor gravida ultricies consequat. Nunc quis tincidunt ligula, vitae elementum dui. Vestibulum id sollicitudin ligula, mattis dapibus tortor. Integer convallis libero eu enim maximus vulputate. Morbi vel turpis et est tincidunt malesuada aliquam at augue. </p>
<p>Aenean egestas tortor ac elementum varius. Aenean bibendum tortor gravida ultricies consequat. Nunc quis tincidunt ligula, vitae elementum dui. Vestibulum id sollicitudin ligula, mattis dapibus tortor. Integer convallis libero eu enim maximus vulputate. Morbi vel turpis et est tincidunt malesuada aliquam at augue. </p>
<p>Aenean egestas tortor ac elementum varius. Aenean bibendum tortor gravida ultricies consequat. Nunc quis tincidunt ligula, vitae elementum dui. Vestibulum id sollicitudin ligula, mattis dapibus tortor. Integer convallis libero eu enim maximus vulputate. Morbi vel turpis et est tincidunt malesuada aliquam at augue. </p>
<p>Aenean egestas tortor ac elementum varius. Aenean bibendum tortor gravida ultricies consequat. Nunc quis tincidunt ligula, vitae elementum dui. Vestibulum id sollicitudin ligula, mattis dapibus tortor. Integer convallis libero eu enim maximus vulputate. Morbi vel turpis et est tincidunt malesuada aliquam at augue. </p>
<p>Aenean egestas tortor ac elementum varius. Aenean bibendum tortor gravida ultricies consequat. Nunc quis tincidunt ligula, vitae elementum dui. Vestibulum id sollicitudin ligula, mattis dapibus tortor. Integer convallis libero eu enim maximus vulputate. Morbi vel turpis et est tincidunt malesuada aliquam at augue. </p>
<p>Aenean egestas tortor ac elementum varius. Aenean bibendum tortor gravida ultricies consequat. Nunc quis tincidunt ligula, vitae elementum dui. Vestibulum id sollicitudin ligula, mattis dapibus tortor. Integer convallis libero eu enim maximus vulputate. Morbi vel turpis et est tincidunt malesuada aliquam at augue. </p>
<p>Aenean egestas tortor ac elementum varius. Aenean bibendum tortor gravida ultricies consequat. Nunc quis tincidunt ligula, vitae elementum dui. Vestibulum id sollicitudin ligula, mattis dapibus tortor. Integer convallis libero eu enim maximus vulputate. Morbi vel turpis et est tincidunt malesuada aliquam at augue. </p>
<p>Aenean egestas tortor ac elementum varius. Aenean bibendum tortor gravida ultricies consequat. Nunc quis tincidunt ligula, vitae elementum dui. Vestibulum id sollicitudin ligula, mattis dapibus tortor. Integer convallis libero eu enim maximus vulputate. Morbi vel turpis et est tincidunt malesuada aliquam at augue. </p>
</div>
</body>
</html>
@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,300&subset=latin,cyrillic);
html, body, .container {
height: 100%;
}
html, body, h1, p, a, div, section {
margin: 0;
padding: 0;
font-size: 100%;
font: inherit;
}
/* Основные стили */
body {
font: 18px/23px "Roboto", sans-serif;
color: #ffffff;
}
h1 {
color: #efecec;
text-transform: uppercase;
font-size: 40px;
line-height: 50px;
font-weight: 400;
margin-top: 20px;
}
a {
color: #ffffff;
}
p {
margin: 0 0 15px 0;
}
strong {
font-weight: 700;
}
.inner {
position: relative;
margin: 0 auto;
text-align: center;
}
.container {
display: table;
padding-top: 80px;
width: 100%;
}
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.sub-title {
margin: 50px auto;
font-size: 18px;
line-height: 23px;
text-transform: uppercase;
}
#more-content {
background: #fff;
padding:20px 0;
}
#more-content p {
width: 70%;
margin:10px auto;
color:#B5B4BA;
}
body {
/* Путь к изображению относительно данного файла */
background-image: url(http://storage4.static.itmages.ru/i/15/0627/h_1435430318_1846079_49e53c0f9e.jpg);
/* Центрирование изображения по вертикали и горизонтали всегда */
background-position: center center;
/* Запрещаем повтор изображения */
background-repeat: no-repeat;
/* Фиксируем изображение - оно остается на месте при прокрутке окна */
background-attachment: fixed;
/* Изображение будет масштабироваться в зависимости от размеров контейнера */
background-size: cover;
/* Цвет фона изображения, который будет показываться пока изображение не загрузится */
background-color:#464646;
/* Эквивалентная сокращенная запись
* background: url(background-photo.jpg) center center cover no-repeat fixed;
*/
}
/* Для мобильных устройств */
@media only screen and (max-width: 767px) {
body {
/* Если размер экрана меньше 767px показываем уменьшенное изображение,
* которое на 77% меньше чем оригинальное для обеспечения быстрой загрузки
* на мобильных устройствах */
background-image: url(http://storage4.static.itmages.ru/i/15/0627/h_1435430393_3198884_dadeba751f.jpg);
}
}
