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

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

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

  1. KrisIris
    KrisIris
    19.05.2017, 05:50
    Здравствуйте!
    Подскажите пожалуйста, если я задаю container высоту 100vh и мне нужно, чтобы помимо текста посередине фонового изображения, внизу блока располагалось еще изображение с кнопкой, как это сделать?
    Спасибо!
    1. Александр Мальцев
      Александр Мальцев
      20.05.2017, 01:40
      Здравствуйте, контейнеру задать относительное позиционирование, а тексту и изображению с кнопкой — абсолютное.
      <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>
      
    2. Константин
      Константин
      15.12.2015, 14:33
      Спасибо, Александр, обязательно попробую. Пока что вышел из положения через Jumbotron и класс .img-responsive. Но Ваш метод может окажется лучше.
      С благодарностью,
      Константин.
      1. Александр Мальцев
        Александр Мальцев
        14.12.2015, 04:43
        Здравствуйте, Константин.
        Не совсем понятно для чего в этом случае Вам 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>
        
        А вообще как сделать это очень много различных способов…
        Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.