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

    show hidden div below current row of divs in responsive layout with jquery

    How to set css to a specific selector using jQuery

    How to load self hosted font files if the GoogleFont service is unavailable?

    How to prevent Twitter Bootstrap changing margins as width of page is extended

    How to use CSS on HTML made by TextEdit?

    How to persist CSS changes with Chrome Developer Tools

    How do I use the Bootstrap form select css with a Rails model?

    Centered CSS pages that are longer than one screen appear 5px~ further to the left than shorter ones - how do I stop this?

    How can I insert new text with a hyperlink into a page in CSS?

    How to chose which CSS rule to use from multiple style sheets

    How to apply dynamic CSS for the label in IE7

    How to modify css to show slider text

    css float: left clash/collision, how to avoid?

    How to Make CSS Work on 404 Error Page?

    How to proper align after CSS column-count

    How to target and style specific elements using CSS

    css how to force a layer to be in the back (z-index doesn't work)

    How come one jquery script cant effect another jquery script

    How to Determine CSS selector on a DOM object?

    How to avoid inheriting opacity property in CSS?

    How to center a navbar

    How to change css for different media without the page having to be refreshed

    Find how an element's css has changed after jQuery “toggle” function has been used

    How to combine bold and italic in CSS?

    How to make a left and right panel, and be able to slide a divider between them?

    Showing the child category when Clicking the parent category

    How to reset css (a:visited{color:green}) when refresh browser address bar

    How do you create a html scrollable area, that just uses the main browser scrollbar

    How can I automatically highlight a specific character in link text using JQuery + CSS?

    How can I create this complicated layout using only CSS?