How do i cover the image on navbar as well?


Tags: html,css,twitter-bootstrap

Problem :

I want to simply make the image to cover the navbar as well, but I'm really confused on how to do it right now.

The picture

enter image description here

currently the navbar and the the image are separate, if possible i want the background of the navbar to be the image as well

Html Code

<!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <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="#">Start Bootstrap</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#about">About</a>
                    </li>
                    <li>
                        <a href="#services">Services</a>
                    </li>
                    <li>
                        <a href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Full Width Image Header -->
    <header class="header-image">
        <div class="headline">
            <div class="container">
                <h1>join our movement!</h1>
                <!-- <h3>Join Now</h3> -->
                <button class="btn btn-success btn-lg">Join Now</button>
                <!-- <button type="button" class="btn btn-primary btn-md">Medium</button> -->
            </div>
        </div>
    </header>

Css code

.header-image {
    display: block;
    width: 100%;
    height: auto;
    text-align: center;
    background-image: url("/images/cloud6.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}


Solution :

set the navbar class background to transparent .navbar { background : transparent; }

set a negative margin to the header image like below; .header-image { margin-top : -40px}; as an example


    CSS Howto..

    How to make a content div stretch from a header div to a footer div?

    how to really include html codes inside php

    How to center a group of images in HTML/CSS?

    (css) how to display a div up as compared to the other divs

    How to make a layout scale with CSS?

    How to adjust navbar to a fixed width in Twitter Bootstrap?

    How to make a picture hover over others without moving the other pictures?

    CSS: How to get lines to “line up” accross different columns?

    How to force style formatting into child tags of

    How do prevent my div from spilling outside its parent container?

    Devtools audit shows unwanted/injected css rules

    Canvas distorts drawing. How do I get the scale factor between the set size and the styled size?

    How to add another two full width sections below (CSS)

    How to prevent css missing when exporting some html to excel file?

    How to animate DOM elements with JavaScript/CSS

    How to hide some text in the middle of a string with only css [duplicate]

    How to align form using css [closed]

    How to make a button light up on hover with twitter bootstrap

    How to center variable length submit buttons?

    Can someone help explain how the css3 calc() method actually works?

    How can i get rid of the open space between the topside of my website and my navigation bar (bootstrap)

    how to avoid overlapping of text

    How to make a toggleable navbar in pure CSS?

    How to include CSS in laravel 5 running with artisan?

    CSS How to Transition from White to Background on Hover

    How to change the media attribute of a css file with plain JS

    How do i add an external CSS file as well as CSS in the HTML file?

    How to set style if the content is X [duplicate]

    Django + Mac osx how to use less css?

    fa-star () is always yellow, how to make it white?