Адаптивный фон для сайта на чистом CSS3 и HTML5

Адаптивный фон является обязательным атрибутом любого современного сайта, что производит очень приятный эффект на одностраничных сайтах-визитках. Создание его не составит труда и будет стоить потраченного времени.

Как легко создать адаптивный фон?

Совсем недавно мы рассмотрели слайдшоу, с помощью которого можно добавить уникальности к странице сайта. А сегодня я бы хотел немного рассказать о том, как же сделать простое фоновое изображение адаптивным и привлекательным на всех видах устройств. Наверняка многие видели красивые продающие страницы и мини-портфолио с красивым фоновым изображением и минималистичными заголовками. И правда, для такого рода сайтов необходимо не так много — важно, чтобы изображение было качественным, а верстка очень грамотной.

Стоит отметить, что данный вариант является лучшим, на мой взгляд, так как в нём задействован тот самый минимум правил, который необходим для идеального функционирования. В данном примере будет использоваться исключительно всеми любимый HTML5, а также современный и очень способный CSS3 — никаких JS и прочих лишних вещей, которые служили ранее необходимым инструментом.

Как создать адаптивный фон

И так, давайте перейдем непосредственно к примеру, в котором можно посмотреть все возможности нашего скромного кода.

ПРИМЕР СКАЧАТЬ

Для начала рассмотрим структуру HTML-файла:

<!doctype html>
<html lang="ru">
<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>
</body>
</html>

<!doctype html>

<head>

<title>Адаптивное фон для сайта</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<h1>Адаптивный фон для сайта</h1>

<p class="sub-title"><strong>красивый фон</strong> <br /> на любом устройстве</p>

</section>

</header>

</body>

</html>

6 строка — обязательный мета-тег, который служит адаптивным правилом для устройств Iphone. Если вы знаете недостаточно, советую ознакомиться с этим в статье про медиаклассы.

11 строка и 14 строка — наши css-файлы, которые мы рассмотрим немного ниже.

19-24 строки — достаточно шаблонная структура. С помощью неё мы будем выводить наш заголовок.

Как можно заметить, достаточно всё просто, хотя для тех, кто мало знаком с HTML5 — такого рода верстка будет чужда, но пора привыкать, почему бы не начать сейчас?! Если появилось желание и интерес — переходите к статье, в которой я описал новые теги и преимущества HTML5.

Следующим этапом будет создание 2 CSS-файлов:

Для начала подключим CSS, который необходим нам для задания правил конкретно к демо-странице. Он носит имя demo.css, который вы можете найти в примере.

@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: #F6F5F5;
  text-transform: uppercase;
  font-size: 38px;
  line-height: 40px;
  font-weight: 600;
  margin-top: 30px;
}

a {
  color: #FDFDFD;
}

p {
  margin: 0 0 20px 0;
}

strong {
  font-weight: 900;
}

.inner {
  position: relative;
  margin: 0 auto;
  text-align: center;
}

.container {
  display: table;
  padding-top: 100px;
  width: 100%;
}

.content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.sub-title {
  margin: 70px auto;
  font-size: 20px;
  line-height: 20px;
  text-transform: uppercase;
}

#more-content {
  background: #FDFDFD;
  padding: 25px 0;
}

#more-content p {
  width: 70%;
  margin: 20px auto;
  color: #F2F2F2;
}

@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: #F6F5F5;

text-transform: uppercase;

font-size: 38px;

line-height: 40px;

font-weight: 600;

margin-top: 30px;

}

a {

color: #FDFDFD;

}

p {

margin: 0 0 20px 0;

}

strong {

font-weight: 900;

}

.inner {

position: relative;

margin: 0 auto;

text-align: center;

}

.container {

display: table;

padding-top: 100px;

width: 100%;

}

.content {

display: table-cell;

vertical-align: middle;

text-align: center;

}

.sub-title {

margin: 70px auto;

font-size: 20px;

line-height: 20px;

text-transform: uppercase;

}

#more-content {

background: #FDFDFD;

padding: 25px 0;

}

#more-content p {

width: 70%;

margin: 20px auto;

color: #F2F2F2;

}

В нём нет ничего особенного, думаю всё достаточно понятно и просто. Следующий CSS-файл необходим нам для создания адаптивности нашему фону и он называется style.css:

body {
  background-image: url(../images/berlin.jpg);
  
  /* Выравнивание картинки по центру */
  background-position: center center;
  
  background-repeat: no-repeat;
  
  background-attachment: fixed;
  
  /* Изменение размера картинки, в зависимости от экрана */
  background-size: cover;
  
  background-color: #3D3D3D;
}

/* adaptive */
@media only screen and (max-width: 767px) {
  body {
    background-image: url(../images/berlin-mobile.jpg);
  }
}

body {

background-image: url(../images/berlin.jpg);

/* Выравнивание картинки по центру */

background-position: center center;

background-repeat: no-repeat;

background-attachment: fixed;

/* Изменение размера картинки, в зависимости от экрана */

background-size: cover;

background-color: #3D3D3D;

}

/* adaptive */

@media only screen and (max-width: 767px) {

body {

background-image: url(../images/berlin-mobile.jpg);

}

Строка 2 — задаём большое изображение, необходимое для ПК.

Строка 10-11 — позволяет выставить размер изображения по размеру окна устройства. То есть, изображение будет такого размера, чтобы создать эффект слайдов. У меня реализован такой пример на главной странице, за исключением того, что в моём случае я создал такой эффект для нескольких фонов. Признаться, было сложнее, чем в данном примере, но немного позже я расскажу и об этом.

Строка 16-21 — применяем уже знакомый нам медиа-запрос. В данном примере, при размере экрана менее 767px (планшет или смартфон) будет использоваться более легкая картинка в уменьшенном формате. Я посчитал нужным предоставить такой вариант для ускоренной загрузки страницы на мобильных устройствах с слабым интернетом.

Вывод

Таким образом мы получаем рабочий вариант идеального адаптивного фона, который будет отлично смотреться на вашем сайте. Не трудно заметить существенную простоту и краткость кода, при том что он содержит только гипертекст, без наличия скриптов, которые только нагружают страницу и служат отрицательным фактором для поисковой системы.