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. Thank you nice and I'm waiting for an answer! https://i.imgur.com/wnf2bZC.jpg
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>Thank you!
