Bootstrap 3 - Фоновый рисунок в качестве шапки

Здравствуйте. Помогите пожалуйста… Осваиваю Bootstrap 3 и реально начинаю сходить с ума оттого, что не получается простейшая, казалось бы, вещь. Сразу скажу, что CSS я осваиваю попутно, т.е новичок. Делаю пробный сайт учителю музыки. Проблема в «шапке»… Я хочу сделать так, чтобы на первой странице (index.html) была одна картинка в шапке. На другой страничке была другая картинка в шапке и т.д. Задача, казалось бы, простая – сделать header фоновый рисунок (jpg или png формата), и чтобы поверх картинки было немного приветственного текста. А также что бы это всё растягивалось под различные устройства (мобилка, планшет, десктоп).

Комментарии: 4

KrisIris
KrisIris
Здравствуйте!
Подскажите пожалуйста, если я задаю container высоту 100vh и мне нужно, чтобы помимо текста посередине фонового изображения, внизу блока располагалось еще изображение с кнопкой, как это сделать?
Спасибо!
Александр Мальцев
Александр Мальцев
Здравствуйте, контейнеру задать относительное позиционирование, а тексту и изображению с кнопкой — абсолютное.
<div class="container" style="height:100vh; position: relative;">
  ...

  <!-- Текст по центру -->
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">...</div>
  <!-- Изображение с кнопкой -->
  <div style="height: 100px; width: 400px; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0);">...</div>
</div>
Аноним
Аноним
Спасибо, Александр, обязательно попробую. Пока что вышел из положения через Jumbotron и класс .img-responsive. Но Ваш метод может окажется лучше.
С благодарностью,
Константин.
Александр Мальцев
Александр Мальцев
Здравствуйте, Константин.
Не совсем понятно для чего в этом случае Вам Bootstrap…
Если необходимо чтобы была только одна картинка на странице, то можно её назначить в качестве фона элементу body.
Можно например сделать так:
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Название страницы</title>  
  <style>
    html, body, .container {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    body{
      background-image: url(images/bg.jpg);
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      background-color: #464646;
    }
    .container {
      display: table;
      width: 100%; 
    }
    .content {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
  </style>
</head>
<body>
  <header class="container">
    <section class="content">
      <h1>Заголовок страницы</h1>
      <p>Текст ...</p>
      <a href="index2.html">Вторая страница</a>
    </section>
  </header>
</body>
</html>
Кроме представленного решения, можно ещё сделать так:
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Название страницы</title>  
  <style>
    body, .container {
      margin: 0;
      padding: 0;
    }
    .container {
      display: table;
      width: 100%; 
      background-image: url(images/bg.jpg);
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      height: 300px;  /* Высота шапки */
    }
    .content {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
  </style>
</head>
<body>
  <header class="container">
    <section class="content">
      <h1>Заголовок страницы</h1>
      <p>Текст ...</p>
    </section>
  </header>
  <main>
    Текст страницы....
  </main>
</body>
А вообще как сделать это очень много различных способов…