Bootstrap - установка обложки поверх панели навигации

У меня есть страница в формате начальной загрузки с фиксированной верхней панелью навигации.

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

Я пробовал это, но обложку просто не показывали.

ОБНОВЛЕНИЕ 1: панель навигации показана внизу страницы (как нижний колонтитул)... не понимаю, почему...

Вот мой HTML:

<div class="CoverImage FlexEmbed FlexEmbed--3by1" style="background-image:url(http://placeimg.com/1000/1000/nature)"></div>
<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
           ...
           ...
           ...

Настройка CSS на панели навигации и CSS:

body {
  min-height: 2000px;
  padding-top: 70px;
}

.navbar-brand,
.navbar-nav li a.main-bar{
    line-height: 70px;
    height: 70px;
    padding-top: 0;
}

.FlexEmbed {
  display: block;
  overflow: hidden;
  position: relative;
}

.FlexEmbed:before {
  content: "";
  display: block;
  width: 100%;
}

.FlexEmbed--3by1:before {
  padding-bottom: 33.33333%;
}

Заранее спасибо сообществу stackru!

ОБНОВЛЕНИЕ 2:

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>MySite</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css" rel="stylesheet">
    <link href="dist/css/navbar-fixed-top.css" rel="stylesheet">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
  </head>

  <body>

    <div class="CoverImage FlexEmbed FlexEmbed--3by1" style="background-image:url(http://placeimg.com/1000/1000/nature)"></div>

   <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">
            <img style="max-width:70px; margin-top: 9px;" alt="IBA" src="#">
          </a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#" id="home" class="main-bar">Home</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle main-bar" data-toggle="dropdown" aria-expanded="false" id="Mydropdown">Mydropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#" id="element1">element1</a></li>
                <li class="divider"></li>
                <li><a href="#" id="element2">element2</a></li>
                <li><a href="#" id="element3">element3</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#" id="element4" class="main-bar" style="color: #18b07d;">element4</a></li>
            <li><a href="#" id="element5" class="main-bar">element5</a></li>
            <li><a href="#" id="element6" class="main-bar">element6</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="container" id="content"></div> // here I paste all the content via jQuery

  </body>
</html>

Вот скрипка к моей проблеме.

Источник

2 ответа

Решение

Надеюсь, я правильно понял ваш вопрос. Одним из вариантов является position ваш фон fixed также. Добавляя width: 100%; а также background-size: cover; Вы получите его полностью.

Обновить:

Чтобы сделать его более похожим на "изображение обложки Facebook", добавьте height к изображению и удалите padding-top: 70px; на body, Тогда вы должны быть установлены.

.FlexEmbed {
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  height: 70px;
    background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

Вы также можете добавить некоторые поля к вашему .navbar-fixed-top чтобы увидеть, что фон отображается сверху.

.navbar-fixed-top {
    top: 70px;
}

Проверьте мою обновленную демо здесь.

Источник

Используйте JsFiddle для создания живого демо.

Панель навигации находится внизу, потому что изображение отображается в виде блока;

Я не совсем уверен в том, что вы пытаетесь достичь, но вы пробовали с z-index?

Источник
Другие вопросы по тегам