Place a background image just below the navbar bootstrap-4 Beta
Place a background image just below the navbar bootstrap-4 Beta
I want to place a background image just below the navbar with full height. If I remove Bootstrap class fixed-topthen background image automatically start below the navbar. In this situation what should I do? How can I achieve this task?
fixed-top
header#MyHeaderControl{
height: 100vh;
width: 100%;
background-image:url("https://images.pexels.com/photos/1055297/pexels-photo-1055297.jpeg?auto=compress&cs=tinysrgb&h=650&w=940");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size:cover;
-o-background-size:cover;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light fixed-top bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<!-- Background image-->
<header class="" id="MyHeaderControl">
</header>
fixed-top
2 Answers
2
Set background-position: center 56px; where 56px is the height of navbar:
background-position: center 56px;
56px
navbar
header#MyHeaderControl{
height: 100vh;
width: 100%;
background-image:url("https://images.pexels.com/photos/1055297/pexels-photo-1055297.jpeg?auto=compress&cs=tinysrgb&h=650&w=940");
background-repeat: no-repeat;
background-position: center 56px;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size:cover;
-o-background-size:cover;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light fixed-top bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<!-- Background image-->
<header class="" id="MyHeaderControl">
</header>
it works! I forgot to say 'Thank You'.
– Hasan
Jul 1 at 20:30
I'm facing the same situation with the bootstrap carousel. How Can I Fix It? Please check: codeply.com/go/11JujOx93X
– Hasan
Jul 1 at 21:01
@Hasan The docs recommend
padding-top on the <body> to prevent overlap with other elements.– fen1x
Jul 1 at 22:41
padding-top
<body>
Got it, Thank you very much, bro.
– Hasan
Jul 1 at 22:54
You van use calc CSS property to achieve this. Just reduce the navbar height from header like this height: calc(100vh - 56px); and remove fixed-top class.
calc
height: calc(100vh - 56px);
fixed-top
You can check this fiddle
For more about calc css property please check https://developer.mozilla.org/en-US/docs/Web/CSS/calc
calc
Hope this will help you.
Thank you brother, Your information is very helpful.
– Hasan
Jul 1 at 5:04
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
So, you want same view without
fixed-topclass?– kravisingh
Jul 1 at 4:37