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
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 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>
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.
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.
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 */
}