sinusGob sinusGob - 3 months ago 5x
CSS Question

How do i cover the image on navbar as well?

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>
<a class="navbar-brand" href="#">Start Bootstrap</a>
<!-- 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">
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
<!-- /.navbar-collapse -->
<!-- /.container -->

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

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;


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