2

I've a bootstrap formatted page with a fixed top navbar.

What I want is to set a full width (fixed height) cover image just over the nav (responsive possibly...).

I've tried this, but the cover just not show.

UPDATE1: the navbar is showed in bottom of the page (like a footer)... don't understand why...

Here is my 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">
           ...
           ...
           ...

Navbar CSS customization and cover 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%;
}

Thanks in advance stackoverflow community!

UPDATE 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>

Heres a fiddle to my problem.

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
ciccioassenza
  • 233
  • 1
  • 7
  • 17

2 Answers2

1

I hope I understood your question correctly. One option is to position your background fixed as well. By adding width: 100%; and background-size: cover; you'll get it to cover completely.

Update:

To get it to be more like a "Facebook cover image" add a height to the image and remove the padding-top: 70px; on the body. Then you should be set.

.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;
}

You could also add some margin to your .navbar-fixed-top to see that the background is displayed on top.

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

Check out my updated demo here.

Topr
  • 872
  • 3
  • 21
  • 34
  • Your solution is near what I looking for. The only problem now is that the nav is displayed over the cover. Is it possible to make the cover is the first thing displayed, and just under the cover start the nav? – ciccioassenza Apr 27 '15 at 11:05
  • @ciccioassenza So you don't want anything fixed? Try changing `position: fixed;` to `position: relative;` on both `.FlexEmbed` and on the `.navbar`. – Topr Apr 27 '15 at 11:11
  • 1
    Thanks Topr, now I go to have lunch ;-) and then I'll try your tips! I am confident that the solution is close! – ciccioassenza Apr 27 '15 at 11:23
  • Sorry for late response...here lunch may go on for days ;). Anyway the problem is, I realized, I do not looking for a background: what I loking for is something like a facebook cover image. So the page have to begin with a full width (about 70px height) fixed top image. Immediately after, attached with this image, comes the navbar. Your solution works, except for the fact it is a background, so the "container div" contents remains in the foreground on the cover. In other words I would like the navbar is an "extension of the cover". Hope I'm clear... Regards. – ciccioassenza Apr 28 '15 at 14:58
  • @ciccioassenza No worries! :) Anyway, check out my updated demo in my answer. – Topr Apr 28 '15 at 18:26
  • Thanks for your time Topr. The problem persist: when I scroll down the page the contents stay in background relative to the navbar (and that's good), but they stay in foreground relative to the cover (not so good...). – ciccioassenza Apr 28 '15 at 18:40
  • Im not sure what you mean by "they stay in foreground relative to the cover"? – Topr Apr 28 '15 at 18:48
  • Yes, I know my english is bad... I've tried to paste some content on your bootply and your code works like a sharm... But I use your same code and it do not work... Try again to explain: when you have some text on a page with a fixed navbar, when you scroll down the page to read the all the content, the text disappear under the navbar. But in my code, the text appear over my cover... Maybe I can send you a screenshot? How? Anyway your code works, so I set this topic as answered. If you have more patient give me more help... – ciccioassenza Apr 28 '15 at 19:38
0

Use JsFiddle to create a live demo.

The navbar is at the bottom because you have the image display as block;

I'm not quite sure either about what you're trying to achieve but, have you tried with z-index?

Enrico
  • 408
  • 6
  • 13