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

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


   Вопросы 0    706 0

Комментарии (2)

  1. Александр Мальцев # 0
    Здравствуйте, Константин.
    Не совсем понятно для чего в этом случае Вам 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>
    
    А вообще как сделать это очень много различных способов…
    1. Константин # 0
      Спасибо, Александр, обязательно попробую. Пока что вышел из положения через Jumbotron и класс .img-responsive. Но Ваш метод может окажется лучше.
      С благодарностью,
      Константин.

      Вы должны авторизоваться, чтобы оставлять комментарии.