Menu
I am trying to create a full background image page with a nav bar that floats on top the image.
I am getting a problem in that the navbar pushes the image down, the image is set on the background of the html element so I dont know why the navbar is having this effect.
I am just using the css straight off the bootstrap getting started page and without the navbar the image fits the entire page, with the navbar it sits above the image and pushes it down:
Css:
html{
/* This image will be displayed fullscreen */
background:url('bg.jpg') no-repeat center center;
/* Ensure the html element always takes up the full height of the browser window */
min-height:100%;
/* The Magic */
background-size:cover;
}
body {
/* Workaround for some mobile browsers */
min-height:100%;
padding-top: 20px;
padding-bottom: 20px;
}
.navbar {
margin-top: 0px;
margin-bottom: 0px;
}
Html:
<body>
<div class="container">
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</div>
The effect that I want to end up with is an image of the entire page and the nav bar sat with the image showing under it, not pushing the image down so it starts after the navbar.
297
Apply the following 2 lines of CSS to the body instead of the html element:
body {
background:url('bg.jpg') no-repeat center center;
background-size:cover;
/* Workaround for some mobile browsers */
min-height:100%;
padding-top: 20px;
padding-bottom: 20px;
}
Give background to body tag.
html{
height: 100%;
width: 100%;
}
body {
/* Workaround for some mobile browsers */
min-height:100%;
padding-top: 20px;
padding-bottom: 20px;
/* This image will be displayed fullscreen */
background:url('http://www.radioviva.fm.br/images/backgrounds/bg-squares-dark.jpg') no-repeat center center;
/* Ensure the html element always takes up the full height of the browser window */
min-height:100%;
/* The Magic */
background-size:cover;
}
}
.navbar {
margin-top: 0px;
margin-bottom: 0px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
