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

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

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

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