I have this image (https://cdn.pixabay.com/photo/2015/08/25/03/51/toner-906142__480.jpg) as as backround image and this light box below it. I would want to have the light box on top of my backround image, so that the backround image can be seen trough the box. I have tried to get in on (top of) the picture instead of being outside of it, but nothing works so far.
I want to have this headline and these words inside the white box, with the backround image seeing trough (opacity being maby 0.5).
<h2 style="color: black" align="center">Food is essential part of our well-being</h2>
<p>Our expertise </p>
Here is the bootstrap/HTML.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="instagram" href="#">
<img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/38-instagram-256.png" width="35" height="35" alt=""></a>
<a class="facebook" href="#">
<img src="https://cdn3.iconfinder.com/data/icons/wpzoom-developer-icon-set/500/01-256.png" width="35" height="35" alt=""></a>
<a class="twitter" href="#">
<img src="https://cdn2.iconfinder.com/data/icons/font-awesome/1792/twitter-square-256.png" width="35" height="35" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#experts">Our experts <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#service">Our service <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#food">Food <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#contact">Contact <span class="sr-only">(current)</span></a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li> -->
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="container" href="service">
<img src="https://cdn.pixabay.com/photo/2015/08/25/03/51/toner-906142__480.jpg" id="ourservicepicture">
<div class="transbox">
<h2 style="color: black" align="center">Food is essential part of our well-being</h2>
<p>Our expertise </p>
</div>
</div>
</div>
</body>
</html>
And CSS:
h1{
}
#h1{
color:blue;
padding-bottom:30px;
font-family: CelebriSans;
}
h2{
font-family: CelebriSans;
margin-top:10px;
}
.navbar{
background-color:#c99ab1 !important;
height:11%;
}
.main{
height:60%;
width:100%;
grid-row: 1/4;
}
p{
font-family: CelebriSans;
font-size:16px;
font-style:bold;
}
div.container{
/* The image used */
/* background-image: url("https://cdn.pixabay.com/photo/2015/08/25/03/51/toner-906142__480.jpg"); */
position: relative;
max-width:100%;
/* Full height */
height: 100%;
margin: 0 auto; /* Center it */
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/*
.container .content{
position: absolute;
/* background: rgb(0, 0, 0); /* Fallback color */
/*background: rgba(255,255,255, 0.5); /* White background with 0.5 opacity
color: black;
width: 75%;
padding: 20px;
}
*/
#ourservicepicture{
height:100%;
width:100%;
margin:0px;
margin-left:0px;
margin-right:0px;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
font-family: Verdana;
font-size: 12px;
color: #000000;
}
You can use display: flex on .container to place elements inside .container on top. I have added some comments to minimize your code. Check it out!
.container {
background-image: url("https://cdn.pixabay.com/photo/2015/08/25/03/51/toner-906142__480.jpg");
/* Add the background image like this */
height: 500px;
/* Give the background image the correct height */
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: flex;
/* Places content inside on top */
justify-content: center;
/* Center horizontally */
align-items: center;
/* Center vertically */
}
.transbox {
padding: 30px;
background-color: rgba(255, 255, 255, 0.5);
/* Opacity can be given to background with rgba*/
border: 1px solid black;
height: 100px;
}
<div class="container" href="service">
<div class="transbox">
<h2>
Food is essential part of our well-being
</h2>
<p>Our expertise </p>
</div>
</div>
Simply add this CSS to your .transbox styles
https://jsfiddle.net/rjaw5nvx/
position: absolute;
top: 50%;
transform: translateY(-50%);
You could also use flexbox to center the box vertically and horizontally but that's a little bit more complicated.
Related
I am troubling in navbar positioning.
My navbar items are disappeared after creating the image below. I have tried to adjust the position of elements but still doesn't work:((
I m also trying to making a fixed-top navbar, it doesn't work too:((
I am bad in positioning, hope someone can show me how to solve the problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.carousel-item{
height:32rem;
background:url(https://picsum.photos/200/300);
color:white;
position:relative;
top:0;
}
.container{
position:absolute;
bottom: 0;
left: 0;
right:0;
padding-bottom: 50px;
}
nav{
min-height: 6vh;
background-color: black;
position: fixed;
top: 0;
overflow: hidden;
width: 100%;
}
nav .navbar-nav{
position:relative;
}
nav .navtoggler .navbar-toggler-icon{
background-color: white;
color:lightgray;
margin-left: 0px;
}
nav .logo{
font-size: 2em;
text-decoration: none;
color:white;
font-weight:bolder;
font-family:Arial, Helvetica, sans-serif;
}
nav .collapse a{
font-weight: bold;
font-size: medium;
color:lightgrey;
text-transform: uppercase;
text-decoration: none;
text-align: center;
word-spacing: 1px;
}
nav .collapse a:hover{
color:hotpink;
}
nav .navbar-nav ul{
list-style: none;
}
nav .nav-link{
display:flex;
width:30%;
letter-spacing: 1px;
word-spacing: 10px;
}
nav .btn{
border:1px solid hotpink;
color:white;
}
nav .btn:hover{
color:hotpink;
}
.main{
margin-top: 30px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-lightdark my-3">
<div class="container ">
<a class="logo " href="index.html" aria-current="page">
<img src="img/logo.png" alt="Logo" style="width:50px; height:55px;"class="d-inline-block mt-2">Fit Fit Fitness
</a>
<button class="navbar-toggler navbar-light bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<!--Related links to other aspects of the website(only for design purpose, not part of the project) -->
<ul class="navbar-nav ms-auto mb-2">
<li class="nav-item">
<a class="nav-link" href="#fp-section2-thelatest">TheLatest</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#fp-section3-workout">Workout</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Food&Nutrition</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Athlete&Celebrities</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Apparel&Gear</a>
</li>
</ul>
<button class="btn btn-small" type="submit">Search</button>
</div>
</div>
</nav>
<main role="main">
<div class="carousel-item active">
<div class="container">
<span class="carousel-artCategory">Food & Nutrition › Weight Loss</span>
<h1 class="carousel-artTitle">Four Easy Change Ups You Can Do Today To Burn More Fat</h1>
<p>
<span class="carousel-artCite">By Train
<time datetime="2017-02-14"> 14 Jul, 2022</time>
</span>
</p>
Read
<a></a>
</div>
</div>
</main>
</body>
</html>
I have tried to insert keyword " fixed-top" into the class of nav, but it doesn't working:((
Besides,
When using position:absolute; the element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, meaning changing it to position:sticky; or removing the line entirely in the container class should fix your issue.
I'm making a single page scrollable website and want to have the first page to be just a navbar, image, and a header. Now the problem is that I was unable to center the header. Well, at least I got it to center horizontally. But I'm unable to center it vertically. I hope somebody can spot the issue because I've been puzzling this annoying issue for hours.
This: https://startbootstrap.com/previews/grayscale/ is the idea I'm going for, to make it clear.
Here is the code
/*body {
background: linear-gradient(rgba(#F9774C, .75), rgba(#802A0C, .85));
background-image: url("Background_photo_2.jpg");
background-size: cover;
box-shadow: 4056 3000px rgba(0, 0, 0, 0) inset;
/* Center and scale the image nicely
background-position: center;
background-repeat: no-repeat;
height: 50%;
}*/
nav {
font-size: medium;
}
.nav-item a{
color: white !important
}
body, html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
/*styles background image*/
.bg-img {
/*background-image: url("Background_photo_2.jpg");*/
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 4000px 3000px rgba(0, 0, 0, 0.6) inset;
}
/* use this to change the general fonts */
p, h1 {
color: white;
}
/* arranges navbar items to right */
ul {
margin-left: auto;
}
.bg-img.container {
display: flex;
justify-content: center;
align-items: center;
}
#content {
width: 100%;
height: 85%;
display: flex;
justify-content: center;
align-items: center;
}
/*.container-fluid {
width: 70%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Both Sides Now </title>
<!-- BOOTSTRAP CDN IMPLEMENTATION-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Links to the stylesheet-->
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<!--This is the navbar-->
<div class="container col-md-10">
<nav class="navbar transparant navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="index.html"><img src="logotransparant.gif" class="d-inline-block align-top" width="60" height="60"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
<header class="masthead d-flex h-100 justify-content-center">
<div class="container ">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase">Grayscale</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2>
Get Started
</div>
</div>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</div>
</html>
nav {
font-size: medium;
}
.nav-item a {
color: white !important
}
body,
html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
/*styles background image*/
.bg-img {
/*background-image: url("Background_photo_2.jpg");*/
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 4000px 3000px rgba(0, 0, 0, 0.6) inset;
}
/* use this to change the general fonts */
p,
h1 {
color: white;
}
/* arranges navbar items to right */
ul {
margin-left: auto;
}
.bg-img.container {
display: flex;
justify-content: center;
align-items: center;
}
#content {
width: 100%;
height: 85%;
display: flex;
justify-content: center;
align-items: center;
}
/*.container-fluid {
width: 70%;
} */
.mx-auto {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Both Sides Now </title>
<!-- BOOTSTRAP CDN IMPLEMENTATION-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Links to the stylesheet-->
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<!--This is the navbar-->
<div class="container col-md-10">
<nav class="navbar transparant navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="index.html"><img src="logotransparant.gif" class="d-inline-block align-top" width="60" height="60"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
<header class="masthead d-flex h-100 justify-content-center">
<div class="container">
<div class="mx-auto text-center">
<h1 class="my-0 text-uppercase">Grayscale</h1>
<h2 class="text-white-50 mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2>
Get Started
</div>
</div>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</div>
</html>
No need to use styles. Bootstrap does it for you :
<header class="row align-items-center masthead d-flex h-100 justify-content-center">
<div class="container ">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase">Grayscale</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2>
Get Started
</div>
</div>
</header>
Add two classes to header div that I have added above.
Note : after you added row class maybe you have to add col to your content elements.
There is two option to do vertical center
you need to give the position to your navigation bar so it does not calculate in flexbox, for that you need to change your code a little bit.
you need to cut out your navigation bar height from your page, so it does not calculate in flexbox, I calculated your navbar height and its equal to 86px so, I will cut 172px from your page
Now you need to choose best way, from my side, first is better than second.
1st Idea
Just added align-items-center vh-100 in masthead class tag and added CSS
.bg-img > .container {
position: fixed;
top: 0;
left: 0;
right: 0;
}
/*body {
background: linear-gradient(rgba(#F9774C, .75), rgba(#802A0C, .85));
background-image: url("Background_photo_2.jpg");
background-size: cover;
box-shadow: 4056 3000px rgba(0, 0, 0, 0) inset;
/* Center and scale the image nicely
background-position: center;
background-repeat: no-repeat;
height: 50%;
}*/
nav {
font-size: medium;
}
.nav-item a{
color: white !important
}
body, html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
/*styles background image*/
.bg-img {
/*background-image: url("Background_photo_2.jpg");*/
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 4000px 3000px rgba(0, 0, 0, 0.6) inset;
}
/* use this to change the general fonts */
p, h1 {
color: white;
}
/* arranges navbar items to right */
ul {
margin-left: auto;
}
.bg-img.container {
display: flex;
justify-content: center;
align-items: center;
}
#content {
width: 100%;
height: 85%;
display: flex;
justify-content: center;
align-items: center;
}
/*.container-fluid {
width: 70%;
}*/
.bg-img > .container {
position: fixed;
top: 0;
left: 0;
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Both Sides Now </title>
<!-- BOOTSTRAP CDN IMPLEMENTATION-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Links to the stylesheet-->
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<!--This is the navbar-->
<div class="container col-md-10">
<nav class="navbar transparant navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="index.html"><img src="logotransparant.gif" class="d-inline-block align-top" width="60" height="60"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
<header class="masthead d-flex vh-100 align-items-center justify-content-center">
<div class="container ">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase">Grayscale</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2>
Get Started
</div>
</div>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</div>
</html>
2nd Idea
Just added align-items-center in masthead class tag and added CSS
.masthead {
height: calc(100vh - 172px);
}
/*body {
background: linear-gradient(rgba(#F9774C, .75), rgba(#802A0C, .85));
background-image: url("Background_photo_2.jpg");
background-size: cover;
box-shadow: 4056 3000px rgba(0, 0, 0, 0) inset;
/* Center and scale the image nicely
background-position: center;
background-repeat: no-repeat;
height: 50%;
}*/
nav {
font-size: medium;
}
.nav-item a{
color: white !important
}
body, html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
/*styles background image*/
.bg-img {
/*background-image: url("Background_photo_2.jpg");*/
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 4000px 3000px rgba(0, 0, 0, 0.6) inset;
}
/* use this to change the general fonts */
p, h1 {
color: white;
}
/* arranges navbar items to right */
ul {
margin-left: auto;
}
.bg-img.container {
display: flex;
justify-content: center;
align-items: center;
}
#content {
width: 100%;
height: 85%;
display: flex;
justify-content: center;
align-items: center;
}
/*.container-fluid {
width: 70%;
}*/
.masthead {
height: calc(100vh - 172px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Both Sides Now </title>
<!-- BOOTSTRAP CDN IMPLEMENTATION-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Links to the stylesheet-->
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<!--This is the navbar-->
<div class="container col-md-10">
<nav class="navbar transparant navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="index.html"><img src="logotransparant.gif" class="d-inline-block align-top" width="60" height="60"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
<header class="masthead d-flex align-items-center justify-content-center">
<div class="container ">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase">Grayscale</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2>
Get Started
</div>
</div>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</div>
</html>
My navbar is not showing at the top. I have used my bootstrap-css file and custom scss file. I am attaching the screenshot.
Also, I wanted to know if the overlay div present here is important or not.
I want it to look like this, and my current page looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./CSS/style.css">
<title>Aurora Grove</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark ">
<a class="navbar-brand" href="#"><h3 class="mb-0">Aurora Grove</h3></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#MainNav" aria-controls="MainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="MainNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a></li>
<li class="nav-item">
<a class="nav-link" href="#">Explore</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Book</a>
</li>
</ul>
</div>
</nav>
<section id="showcase" class="d-flex justify-content-center align-items-center">
<div id="overlay"></div>
<div class="container text-center text-white " id="header">
<h3 class="display-5">mordern camping</h3>
<h1 class="display-1">Aurora Grove</h1>
<p class="lead d-none d-md-block">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores?</p>
<button id="book" class="btn btn-primary px-5">Book Now</button>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
scss file
body{
background-color: #d460bb;
font-family: "Raleway",sans-serif;
}
.navbar{
font-weight: 100;
position: fixed;
top: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
.navbar-brand h3{
font-weight: 100;
}
.nav-item{
font-size: 1.4rem;
}
.nav-link:hover{
transition: border 0.2s;
border-bottom: 1px solid white;
}
}
// showcasase
#showcase{
background: url('../images/main.jpeg') bottom center no-repeat;
min-height: 30rem;
position: relative;
#header{
z-index: 2;
}
#overlay{
background: rgba($color: #000000, $alpha: 0.2);
position: absolute;
top: 0rem;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 1;
}
h1{
font-family: "Questrial",sans-serif;
line-height: 1;
}
#book{
font-size: 1.5rem;
border-radius: 2rem;
}
}
// phone
#media (max-width:768px){
.navbar{
background: #1f1f1f;
.nav-link:hover{
border-bottom: none;
}
}
// showcase
#showcase{
min-height: 500px;
h1{
font-size: 4rem;
}
}
}
Thanks.
It was mainly due to the height:100%.
body {
font-family: "Raleway", sans-serif;
}
.navbar {
font-weight: 100;
position: fixed;
top: 0;
right: 0;
left: 0;
width: 100%;
z-index: 3;
}
.navbar-brand h3 {
font-weight: 100;
}
.nav-item {
font-size: 1.4rem;
}
.nav-link:hover {
transition: border 0.2s;
border-bottom: 1px solid white;
}
#showcase {
background: url("https://images.unsplash.com/photo-1478827536114-da961b7f86d2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop")
no-repeat bottom center;
min-height: 30rem;
position: relative;
#header {
z-index: 2;
}
#overlay {
background: #000000;
opacity: 0.2;
position: absolute;
top: 0rem;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 1;
}
h1 {
font-family: "Questrial", sans-serif;
line-height: 1;
}
#book {
font-size: 1.5rem;
border-radius: 2rem;
}
}
// phone
#media (max-width: 768px) {
.navbar {
background: #1f1f1f;
.nav-link:hover {
border-bottom: none;
}
}
// showcase
#showcase {
min-height: 500px;
h1 {
font-size: 4rem;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Template</title>
<!-- bootstrap 4.4 -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<a class="navbar-brand" href="#"><h3 class="mb-0">Aurora Grove</h3></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#MainNav"
aria-controls="MainNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="MainNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Explore</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Book</a>
</li>
</ul>
</div>
</nav>
<section
id="showcase"
class="d-flex justify-content-center align-items-center"
>
<div id="overlay"></div>
<div class="container text-center text-white " id="header">
<h3 class="display-5">mordern camping</h3>
<h1 class="display-1">Aurora Grove</h1>
<p class="lead d-none d-md-block">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores?
</p>
<button id="book" class="btn btn-primary px-5">Book Now</button>
</div>
</section>
<!-- Bootstrap js ,popper js and jquery -->
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
</body>
</html>
As part of your follow-up question
Also, I wanted to know if the overlay div present here is important or not?
It depends on you if you want to add an overlay effect on certain area not. Generally it is added to make some part closer(more appealing/more focused) to the user
You have mentioned height:100% in the styles for .navbar.
I changed that to height:15vh; and it seems to work fine.
Feel free to play with the value until you find it suitable.
I have the problem where I cannot make my content div take up all the space of the content area.
I have a fixed footer and static header. The content div is actually inside the div from a RenderBody directive in ASP.Net Core MVC.
Here are what a couple of pages look like with the footer at the bottom:
So I actually don't mind that the blue content div does not come down to the bottom. I think I can take it or leave it.
But then I created this page with a big image in the content div:
In this last pic you can see the image goes into the footer and extends the height of the footer element from it's orginal 60px height.
Here is my style sheet:
html, body {
height: 100%;
}
.footer{
position: absolute;
bottom: 0;
width: 100%;
white-space:nowrap;
line-height: 60px;
}
.content {
background-color: cornflowerblue /*aliceblue*/;
border: 1px solid black;
padding:10px;
}
.title {
/*background-color: cornflowerblue;*/
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
/* anchor styles */
.nav-link, .dropdown-item {
color: blue !important;
}
.nav-link:hover, .dropdown-item:hover {
color: darkgreen !important;
background-color:aliceblue;
}
.green-header-nav{
color: black;
}
.green-header-nav:hover {
color: black;
}
.facebook-anchor {
color: #4267B2
}
.facebook-anchor:hover {
color: #4267B2
}
/* end anchor styles */
Here is my layout page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"
/>
<title>NeuroplasticityTherapies -
#ViewData["Title"]</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/font-awesome/css/fontawesome.min.css" />
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<div class="row" style="background-color:black">
<div class="col-3">
<img src="~/Images/dark-blue-brain.jpg" />
</div>
<div class="col-9 text-center">
<div class="text-light" style="height:100%">
<h1>Neuroplasticity Therapies</h1>
<div style="border:1px solid green; padding:15px; border-radius:25px; display:inline-block;">
There are answers and where there are answers there is hope.
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-light">
#*<a class="navbar-brand" href="#">Navbar</a>*#
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" asp-action="Index">
Neuroplasticity Therapies
</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-action="AboutTheFounder">
About The Founder
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Functional Neurology
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Functional Medicine</a>
<a class="dropdown-item" href="#">Neural Plasticity</a>
<a class="dropdown-item" href="#">Alternative Medicine</a>
<a class="dropdown-item" href="#">Integrative Medicine</a>
<a class="dropdown-item" href="#">Holistic Medicine</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Survey</a>
</li>
</ul>
</div>
</nav>
<div class="row bg-info">
<div class="col-sm-3" style="border:2px solid black; text-align:center;font-weight:bold">
Contact Us
</div>
<div class="col-sm-6" style="border:2px solid black; text-align:center;font-weight:bold; background-color:black;">
<a class="facebook-anchor"
href="https://www.facebook.com/groups/NeuroplasticityTherapies/"
target="_blank">
Like Us On Facebook
<i class="fab fa-facebook"></i>
</a>
</div>
<div class="col-sm-3" style="border:2px solid black; text-align:center;font-weight:bold">
<a class="green-header-nav" asp-action="BrainMap">
Brain Map</a>
</div>
</div>
<div class="container-fluid">
#RenderBody()
</div>
<footer id="footer" class="border-top footer text-muted">
<div class="container">
© 2020 - NeuroplasticityTherapies
</div>
</footer>
<script src="~/lib/jquery/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
#*<script>
console.log(`footer.top: ${document.getElementById("footer").offsetTop}`);
var footer_top = document.getElementById("footer").offsetTop;
document.getElementById("content_div").style.bottom
= footer_top;
</script>*#
</body>
</html>
Here is a content page with the blue background for "About The Author":
#{
ViewData["Title"] = "AboutTheFounder";
}
<h1 class="title">About The Founder</h1>
<div id="content_div" class="content">
<b>Gemma Herbertson</b>
<p></p>
Gemma has received training from all different parts of the world to include:
<ul>
<li>Institute of Neuro-Physiological Psychology (UK)</li>
<li>Rhythmic Movement Therapy, JIAS (Denmark)</li>
<li>Family Hope Centre (USA)</li>
<li>Carrick Institute (USA)</li>
<li>Kharrazian Institute (USA)</li>
<li>Gillespie Approach (USA)</li>
<li>The Neuro Science Academy (Australia)</li>
</ul>
Her approach is to work from the <u>bottom-up</u>:
getting the brain to a healthy state
(well-fuelled with nutrients and oxygen),
and then providing individual neuroplasticity exercises
for optimum effect.
</div>
Here is the page with the image on it in the content area. The page is named "BrainMap". This one is raising the issue for me. I believe if there is too much content on any page I will run into this issue.
#{
ViewData["Title"] = "BrainMap";
}
<h1>BrainMap</h1>
<div id="content_div" class="content">
<img src="~/Images/brain_map.jpg" class="center" />
</div>
Don't know why I went down the road of color on the content background but I really want it now I think it is looking good.
You may try using the calc in CSS:
e.g.
if your header height = 100px, and footer = 80px fixed, then you can set your content height = calc(100% - 180px)
Refer: https://www.w3schools.com/cssref/func_calc.asp
html {
height: 100%;
}
body {
position: relative;
margin: 0;
padding-bottom: 60px;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
}
.content {
background-color: cornflowerblue /*aliceblue*/;
border: 1px solid black;
padding: 10px;
height: calc(100vh - 260px);
/*you can change 260px accordingly to your needs*/
}
...
Here is the result of this demo:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>James McGill</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-md sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">J.M</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact me</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="intro">
<div class="inner">
<div class="content">
<h1>Hello there!</h1>
<h3>My name is James McGill and I'm a front-end web developer.</h3>
</div>
</section>
<div class="wrapper">
<h1>My skills</h1>
<br><br>
<h2>HTML</h2>
<div>90%</div>
<h2>CSS</h2>
<div>70%</div>
<h2>Javascript</h2>
<div>60%</div>
<h2>jQuery</h2>
<div>55%</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
CSS
html, body {
height: 100%;
margin: 0;
width: 100%;
padding: 0;
}
body {
background-image: url("https://cdn-images-1.medium.com/max/2000/1*M6iNwOtplNTw1EOTcUklkQ.png");
background-size: cover; /*This makes the image cover the whole page space*/
background-position: center;
color: white !important;
font-family: 'Raleway', sans-serif;
font-weight: 700;
}
.intro {
height: 100%;
width: 100%;
}
nav .navbar-nav li a {
color: white !important;
font-family: 'Raleway', sans-serif;
font-weight: 700;
}
.navbar-brand {
color: white !important;
}
.content {
text-align: center;
padding-top: 25%;
text-shadow: 0px 4px 3px rgba(0,0,0,0.5);
}
Hey guys,
if you view my site on your browser you will see that as you scroll down the 'h1' which says "My skills" is located just before the start of the next page.
https://codepen.io/JamesMcGill/pen/KGNEWd On codepen it's even worse.
I am having a difficult time trying to figure out why this is happening.
Well, technically it is not on the same page. However, it does appear within the same background image as the contents on the main welcoming page.
Please, give me some suggestions on how I might be able to address this issue.
Thank you..
You applied the background-image to the body element, which will cause it to fill the screen. If you want it to only cover the first section, you should apply the background-image rule to that specific section.
It is doubling up at the bottom because background-repeat: repeat is the default and you have not declared an alternative. If you want if to fill the screen, you can add background-size: cover, or simply add background-repeat: no-repeat to prevent the doubling.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat