How to set the body background image at 50%? - html

How can I make the body image only visible in half?
I also tried with background-size, I don't succeed or I don't realize being a beginner.
Looking for a few good hours to answer the question, I do not realize how I can make the image to be seen only half of the screen.
body {
background: url(bg.jpg) no-repeat center center fixed;
margin-top: -10px;
min-height: 100vh;
overflow-x: hidden;
}
.vertical-nav {
min-width: 17rem;
width: 17rem;
height: 100vh;
position: fixed;
top: 0;
left: 0;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
transition: all 0.4s;
}
.page-content {
width: calc(100% - 17rem);
margin-left: 17rem;
transition: all 0.4s;
}
<!DOCTYPE html>
<html>
<head>
<title>Startup</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- Bootstrap CSS from a CDN. This way you don't have to include the bootstrap file yourself -->
<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">
<!-- Your own stylesheet -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="vertical-nav bg-white" id="sidebar">
<p class="text-gray font-weight-bold text-uppercase px-3 small pb-4 mb-0">BAZA DE DATE</p>
<ul class="nav flex-column mb-0">
<li class="nav-item">
<a class="nav-link text-dark font-italic bg-light" href="#">
<i class="fas fa-home mr-3 text-primary fa-fw"></i>
Acasa
</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark font-italic bg-light" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark font-italic bg-light" href="#">Active</a>
</li>
</ul>
</div>
<div class="page-content p-5" id="content">
<h2 class="display-4 text-white">Bootstrap vertical nav</h2>
</div>
</body>
</html>

div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
There is no CSS property background-opacity, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it.

Here is the sample code where I was able to achieve it.
.main{
overflow: hidden;
}
.div1{
width:30%;
height:400px;
display:inline-block;
float:left;
}
.div2{
width:70%;
height:400px;
display:inline-block;
float:left;
position: relative;
text-align: center;
color: white;
}
.cusImg{
width:100%;
height:100%
}
.topLeft{
position: absolute;
top: 8px;
left: 16px;
}
<!DOCTYPE html>
<html>
<head>
<title>Startup</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- Bootstrap CSS from a CDN. This way you don't have to include the bootstrap file yourself -->
<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">
<!-- Your own stylesheet -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main">
<div class="vertical-nav bg-white div1" id="sidebar">
<p class="text-gray font-weight-bold text-uppercase px-3 small pb-4 mb-0">BAZA DE DATE</p>
<ul class="nav flex-column mb-0">
<li class="nav-item">
<a class="nav-link text-dark font-italic bg-light" href="#">
<i class="fas fa-home mr-3 text-primary fa-fw"></i>
Acasa
</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark font-italic bg-light" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark font-italic bg-light" href="#">Active</a>
</li>
</ul>
</div>
<div class="div2">
<img class="cusImg" src="http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg" alt="">
<div class="topLeft">
Hello There!
</div>
</div>
</div>
</body>
</html
Let me know if this helps you.

Related

Razor Pages ASP.NET Core 6 - How to add background image with blur

I have successfully added a "background-image" to my Razor Pages application.
Now, when using "filter: blur(2px);" the header and footer blur, but not the image.
I've been at this for hours, saw tons of threads on how to add the image, but couldn't find a way to do this properly (the blur), or see someone else experiencing the same behavior.
My _Layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - LifeCompanion</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/LifeCompanion.styles.css" asp-append-version="true" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm bg-transparent border-bottom box-shadow mb-3">
<div class="container">
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
LifeCompanion
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li>
<a class="dropdown-item" type="button" asp-page="/LActions/ImageManagement">
Images!
</a>
</li>
</ul>
</div>
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - LifeCompanion - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
My CSS - using site.css to apply changes globally - is:
html {
font-size: 14px;
width: 100%;
height: 100%;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
background: url(../img/background.jpg) no-repeat center center fixed;
background-size: cover;
width: 100%;
height: 100%;
color: white;
}
So far so good.
Now when adding to my css:
body {
margin-bottom: 60px;
background: url(../img/background.jpg) no-repeat center center fixed;
background-size: cover;
width: 100%;
height: 100%;
color: white;
filter: blur(2px);
}
The footer and header blurs, but not the background-image as anticipated.
Replace filter: blur(2px); with backdrop-filter: blur(2px);.
filter will affect the element itself, and backdrop-filter will affect the elements beneath the element within the bounding box of the element.So in your project, you need to use backdrop-filter. You can follow this link to learn more about backdrop-filter.

My custom sidebar didn't fill the entire column in bootstrap

My sidebar didnt fill entire column from bootstrap. i didnt define the width for the sidebar
here is my css for sidebar
.sidebar {
position: fixed;
/* top: 0;
bottom: 0;
left: 0;
width:100%;
z-index: 100; */ /* Behind the navbar */
background-color: #3A3735;
}
.sidebar-sticky {
position: relative;
top: 0;
height: 100vh;
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
#supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
}
}
.sidebar .nav-link {
font-weight: 500;
color: #ffffff;
margin-bottom: 15px;
}
.sidebar .nav-link.active {
color: #3A3735;
background-color: #fff;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 30px;
}
.sidebar .nav-link:hover .icon-sidebar,
.sidebar .nav-link.active .icon-sidebar {
color: green;
}
.sidebar-heading {
font-size: .75rem;
text-transform: uppercase;
}
my html looks like this
<div class="row">
<div class="col-2">
<nav id="sidebarMenu" class="sidebar">
<div class="sidebar-sticky pt-3">
<p class="d-flex justify-content-center align-items-center">
<a href="#">
<img src="img/logo-white.svg" alt="home">
</a>
</p>
<ul class="nav nav-pills flex-column mx-4">
<li class="nav-item mb-2">
<a class="nav-link active" href="#">
<img src="img/sidebar/home.svg" class="mr-3 icon-sidebar" alt="">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link" href="#">
<img src="img/sidebar/check-circle.svg" class="mr-3 icon-sidebar" alt="">
Goal
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link" href="#">
<img src="img/sidebar/clipboard.svg" class="mr-3 icon-sidebar" alt="">
To Do
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link" href="#">
<img src="img/sidebar/calendar.svg" class="mr-3 icon-sidebar" alt="">
Kalender
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-10">
</div>
</div>
currently im using bootstrap 4.6 version.
and here is my full code in github:
for css
https://github.com/gergerchan/testingfrontend/blob/feature/goal-dan-register/assets/css/sidebar.css
for the sidebar
https://github.com/gergerchan/testingfrontend/blob/feature/goal-dan-register/views/partials/sidebar.ejs
for the full html
https://github.com/gergerchan/testingfrontend/blob/feature/goal-dan-register/views/goal.ejs
update :
i remove position:fixed and change it to height :100%
but when i scroll now my side bar content will scroll too.
i am using nodejs, express js, and for the view engine i use ejs.
thank you before
Can you please check the below code? Hope it will work for you. We have remove position: fixed form sidebar and add row element in parents of col-*
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<style>
.sidebar {
/* position: fixed; */
/* top: 0;
bottom: 0;
left: 0;
width:100%;
z-index: 100; */
/* Behind the navbar */
background-color: #3A3735;
}
.sidebar-sticky {
position: relative;
top: 0;
height: 100vh;
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto;
/* Scrollable contents if viewport is shorter than content. */
}
#supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
}
}
.sidebar .nav-link {
font-weight: 500;
color: #ffffff;
margin-bottom: 15px;
}
.sidebar .nav-link.active {
color: #3A3735;
background-color: #fff;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 30px;
}
.sidebar .nav-link:hover .icon-sidebar,
.sidebar .nav-link.active .icon-sidebar {
color: green;
}
.sidebar-heading {
font-size: .75rem;
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="row">
<div class="col-2">
<nav id="sidebarMenu" class="sidebar">
<div class="sidebar-sticky pt-3">
<p class="d-flex justify-content-center align-items-center">
<a href="#">
<img src="img/logo-white.svg" alt="home">
</a>
</p>
<ul class="nav nav-pills flex-column mx-4">
<li class="nav-item mb-2">
<a class="nav-link active" href="#">
<img src="img/sidebar/home.svg" class="mr-3 icon-sidebar" alt=""> Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link" href="#">
<img src="img/sidebar/check-circle.svg" class="mr-3 icon-sidebar" alt=""> Goal
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link" href="#">
<img src="img/sidebar/clipboard.svg" class="mr-3 icon-sidebar" alt=""> To Do
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link" href="#">
<img src="img/sidebar/calendar.svg" class="mr-3 icon-sidebar" alt=""> Kalender
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-10">
</div>
</div>
</body>
</html>

making nav tag expand for all the height of screen

I'm new in frontEnd development, I need to make sidebar Menu of a tag expand over the height of the screen even when my tag isn't full of content that will fill all the height of the screen.
the code of my base.html:
{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<!-- CSS Files -->
<link rel="stylesheet" href="{% static 'Drivers_App_Management/css/base.css' %}" type="text/css" media="screen">
<!-- Bootstrap CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<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">
<style media="screen" type="text/css">
/* Chart.js */
#keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}
</style>
{% block title %}
{% endblock title %}
</head>
<body>
<header class="navbar navbar-dark sticky-top flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="{% url 'Drivers_App_Management:index' %}">
<span class="d-flex">
<img src="{% static 'Drivers_App_Management/media/ST.png' %}" class="img-fluid rounded-pill" width="47" height="60" alt="...">
</span>
</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="media-body ml-2 d-none d-lg-block">
<span class="mb-0 text-sm font-weight-bold">
Bonjour:
{{ user.first_name }}
{{user.registration_number}}
</span>
</div>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#"> Link to somewhere </a>
</li>
</ul>
</header>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="navbar sidebar col-md-3 col-lg-2 d-md-block bg-dark sidebar-dark bg-gradient collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="{% url 'Drivers_App_Management:index' %}"> Dashboard </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Orders </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Products </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Customers </a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">Title
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#"> Month</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Last Quarter </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Year-end sale </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Sociale </a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 ">
<div class="chartjs-size-monitor">
<div class="chartjs-size-monitor-expand">
<div class=""></div>
</div>
<div class="chartjs-size-monitor-shrink">
<div class=""></div>
</div>
</div>
<div class="d-flex justify-content-evenly flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2"> Tableau de bord</h1>
</div>
{% block content %}{% endblock content %}
</main>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons#4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script>
</body>
</html>
the css code base.css for this html is:
body {
font-size: .875rem;
}
header {
background-color: #e21718;
}
.feather {
width: 16px;
height: 16px;
vertical-align: text-bottom;
}
/*
* Sidebar
*/
.sidebar {
position: fixed;
top: 0;
/* rtl:raw:
right: 0;
*/
bottom: 0;
/* rtl:remove */
left: 0;
z-index: 100; /* Behind the navbar */
padding: 48px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
#media (max-width: 767.98px) {
.sidebar {
top: 5rem;
}
}
.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
.sidebar .nav-link {
font-weight: 500;
color: white;
}
.sidebar .nav-link .feather {
margin-right: 4px;
color: #727272;
}
.sidebar .nav-link.active {
color: #007bff;
}
.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
color: inherit;
}
.sidebar-heading {
font-size: .75rem;
text-transform: uppercase;
}
/*
* Navbar
*/
.navbar-brand {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
background-color: rgba(0, 0, 0, .25);
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}
.navbar .navbar-toggler {
top: .25rem;
right: 1rem;
}
.navbar .form-control {
padding: .75rem 1rem;
border-width: 0;
border-radius: 0;
}
.form-control-dark {
color: #fff;
background-color: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .1);
}
.form-control-dark:focus {
border-color: transparent;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}
this is a picture of my webpage when lot to display in the tag:
You could give your sidebar element a min-height: 100vh, using viewport units to make sure you at least cover the screen.

can't make the main tag expand over all the space in the monitor

I'm working in the base.html of a dashboard for my webapp, and trying to make a div expand over all the monitor's space left after the sidebar navigation that tacks 3 columns left. also the button that it meant to be a toggler when the size of the screen is small don't contain the sidebarMenu.
the code for the this page:
{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<!-- CSS Files -->
<link rel="stylesheet" href="{% static 'Drivers_App_Management/css/base.css' %}" type="text/css" media="screen">
<!-- Bootstrap CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<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">
<style media="screen" type="text/css">
/* Chart.js */
#keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}
</style>
{% block title %}
{% endblock title %}
</head>
<body>
<header class="navbar navbar-dark sticky-top flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="{% url 'Drivers_App_Management:index' %}">
<span class="d-flex">
<img src="{% static 'Drivers_App_Management/media/ST.png' %}" class="img-fluid rounded-circle" width="47" height="60" alt="...">
</span>
</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="media-body ml-2 d-none d-lg-block">
<span class="mb-0 text-sm font-weight-bold">
Bonjour:
{{ user.first_name }}
{{user.registration_number}}
</span>
</div>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#"> Link to somewhere </a>
</li>
</ul>
</header>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-dark sidebar-dark collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#"> Dashboard </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Orders </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Products </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Customers </a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Title</span>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#"> Month</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Last Quarter </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Year-end sale </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Sociale </a>
</li>
</ul>
</div>
</nav>
<main id="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="chartjs-size-monitor">
<div class="chartjs-size-monitor-expand">
<div class=""></div>
</div>
<div class="chartjs-size-monitor-shrink">
<div class=""></div>
</div>
</div>
<div class="d-flex justify-content-evenly flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2"> Tableau de bord</h1>
</div>
{% block content %}{% endblock content %}
</main>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons#4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script>
</body>
</html>
the base.css is:
body {
font-size: .875rem;
}
header {
background-color: #e21718;
}
.feather {
width: 16px;
height: 16px;
vertical-align: text-bottom;
}
/*
* Sidebar
*/
.sidebar {
position: fixed;
top: 0;
/* rtl:raw:
right: 0;
*/
bottom: 0;
/* rtl:remove */
left: 0;
z-index: 100; /* Behind the navbar */
padding: 48px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
#media (max-width: 767.98px) {
.sidebar {
top: 5rem;
}
}
.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
.sidebar .nav-link {
font-weight: 500;
color: #333;
}
.sidebar .nav-link .feather {
margin-right: 4px;
color: #727272;
}
.sidebar .nav-link.active {
color: #007bff;
}
.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
color: inherit;
}
.sidebar-heading {
font-size: .75rem;
text-transform: uppercase;
}
/*
* Navbar
*/
.navbar-brand {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
background-color: rgba(0, 0, 0, .25);
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}
.navbar .navbar-toggler {
top: .25rem;
right: 1rem;
}
.navbar .form-control {
padding: .75rem 1rem;
border-width: 0;
border-radius: 0;
}
.form-control-dark {
color: #fff;
background-color: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .1);
}
.form-control-dark:focus {
border-color: transparent;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}
the wepage looks like :
You made the mistake of specifying a class listing id for the main tag. Here:
<main id="col-md-9 ms-sm-auto col-lg-10 px-md-4">
Since these are classes, use the class attribute. Like this:
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
The id attribute cannot contain a list of identifiers from the point of view of correct layout. This is attribute name must contain only one value.

how to make background image transparent and the text written on it should be highlighted

Since I am not able to make the background transparent, means I want the image opacity should be minimum and the text written on it should be highlighted. Please help me out from this. As I used css opacity but the whole div is getting transparent with the text also written on it.
Here is my html and css:
.bgimg{
background: url('bg2.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
width: 100%;
height: 600px;
}
.headerset{
padding-top: 250px;
box-sizing: border-box;
}
.headerset h2{
font-size: 40px;
}
.headerset h1{
font-size: 82px;
font-weight: bold;
}
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="hover.css" media="all">
<div class="bgimg">
<nav class="navbar navbar-expand-md navbar-dark nav fixed-top" style="background-color: #D7DBDD">
<div class="container" style="height: 50px">
TheCureKit
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="collapsenavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Book Appointment
</li>
<li class="nav-item">
Book Tests
</li>
<li class="nav-item">
Order Medicines
</li>
<li class="nav-item">
Login|signup
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center headerset">
<h2 style="color: black;">Welcome to our studio</h2>
<h1 style="color: black;">IT'S NICE TO MEET YOU</h1>
<button class="btn btn-warning text-white btn-lg" style="margin-bottom: 10px;">BOOK NOW</button>
</div>
</div>
I think this is what you need. We can achieve background transparent by using pseudo class. Please check the below code.
.bgimg{
width: 100%;
height: 600px;
}
.bgimg::after {
content: "";
background: url('https://images.pexels.com/photos/137219/pexels-photo-137219.jpeg?auto=compress&cs=tinysrgb&h=350');
background-size: cover;
background-position: center;
background-attachment: fixed;
opacity: 0.3;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
.headerset{
padding-top: 250px;
box-sizing: border-box;
}
.headerset h2{
font-size: 40px;
}
.headerset h1{
font-size: 82px;
font-weight: bold;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="hover.css" media="all">
<div class="bgimg">
<nav class="navbar navbar-expand-md navbar-dark nav fixed-top" style="background-color: #D7DBDD">
<div class="container" style="height: 50px">
TheCureKit
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="collapsenavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="" class="nav-link text-white hvr-underline-from-center" >Book Appointment</a>
</li>
<li class="nav-item">
Book Tests
</li>
<li class="nav-item">
Order Medicines
</li>
<li class="nav-item">
Login|signup
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center headerset">
<h2 style="color: black;">Welcome to our studio</h2>
<h1 style="color: black;">IT'S NICE TO MEET YOU</h1>
<button class="btn btn-warning text-white btn-lg" style="margin-bottom: 10px;">BOOK NOW</button>
</div>
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}