*{
margin:0;
padding:0;
}
html, body{
box-sizing:border-box;
height: 100vh;
}
body{
color:white;
height: 100%;
min-width: 100%;
background: url("images/friends.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
.container{
height: 100%;
width: 100%;
}
.container2{
width:80%;
margin:auto;
text-align:center;
}
header{
padding:1em;
margin: 0;
}
/*navigation styling*/
#navbar{
display: flex;
justify-content: space-between;
}
#navbar ul{
display:flex;
align-items:center;
list-style:none;
}
#navbar ul li a{
text-decoration:none;
padding:.75rem;
}
header nav li a:hover{
color:red;
transition:.75s;
}
/*login modal styling*/
#login-modal{
width:100%;
height:100%;
background-color:rgba(0, 0, 0, 0.5);
position: absolute;
top:0;
left:0;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
display: none;
}
#login-content{
height:80%;
width:25%;
position:relative;
background-color:red;
border-radius:2%;
display:flex;
flex-direction: column;
justify-content:center;
text-align:center;
}
.close{
position:absolute;
top:0;
right:5%;
cursor:pointer;
font-size: 30px;
}
.login-input{
display:block;
margin: 0 auto 1.5rem auto;
padding:.5rem;
border: 2px solid black;
border-radius:24px;
}
#login-logo{
height:6rem;
width:6rem;
margin-bottom: 2rem;;
}
.agreement{
margin:1.5rem 1rem;
}
/*remove border on inputs, etc.*/
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
.button{
width: 6rem;
height: 2.5rem;
color: red;
background-color:white;
border-radius:24px;
border:none;
cursor:pointer;
}
.button:hover{
color:white;
background-color: #861111;
transition:.75s;
}
a{
color:white;
}
/*main description of site for homepage*/
.maindescription{
margin:2rem;
}
.description-header{
font-size:4rem;
margin-bottom:.5rem;
}
.description{
margin-bottom: .75rem;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="apple-touch-icon" sizes="180x180"
href="images\free_horizontal_on_white_by_logaster.jpg">
<link rel="icon" type="image/jpg" sizes="32x32"
href="images\free_horizontal_on_white_by_logaster.jpg">
<link rel="icon" type="image/jpg" sizes="16x16"
href="images\free_horizontal_on_white_by_logaster.jpg">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<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="resolve.css">
<title>Resolve - Real Women, Real Feedback</title>
</head>
<body>
<header>
<div class="container">
<nav id="navbar">
<div id="branding">
<a href="indexresolve.html"><img src="images/lasttry.png"
alt="resolvelogo"></a>
</div>
<ul>
<li><a href="indexresolve.html"Home></a></li>
<li><a class="current" href="howitworks.html">How It
Works</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><button id="login" class="button">Log In</button>
</li>
</ul>
</nav>
<!-- Login Modal -->
<div id="login-modal">
<div id="login-content">
<span class="close">×</span>
<div>
<img id="login-logo"
src="images\free_horizontal_on_white_by_logaster.jpg">
</div>
<form>
<input class ="login-input" type="text"
placeholder="username" >
<input class ="login-input" type="password"
placeholder="password">
<button class="button" id="modalbutton">Log
In</button>
</form>
<p class="agreement">By clicking log in, you agree
to our <a href="terms.html">Terms</a>, <a href="privacy.html">Privacy
Policy</a>, and
our <a href="cookie.html">Cookie Policy</a>.</p>
<P><a href="forgotpasswords">Forgot Username or
Password?</a></P>
</div>
</div>
<!--End Login Modal-->
</nav>
</header>
<section>
<!--Guys-->
<div class="container2">
<div class="maindescription">
<h1 class="description-header">Guys</h1>
<h2 class="description">Resolve is the new way to improve
your dating life. Get real women's unbiased feedback on your
dating profiles, the way you dress, your body language,
conversational skills, and more. Real, actionable advice on how to become a
man
that women will desire.</h2>
<button class="button">Get Started</button>
</div>
<!--Ladies-->
<div class="maindescription">
<h1 class="description-header">Ladies</h1>
<h2 class="description">dhkjfdah jdhfakjh jhafdkjh kjhfdalkjf lkjafhd
fhkahuf kjeuud eeuiw udhakje huidhf aufhlahfa fuashfeudhfyus fuaifhdsh
khadf alufhaliufhalifhaf sf! </h2>
<button class="button">Get Started</button>
</div>
</div>
</section>
<script src="resolve.js"></script>
</body>
</html>
Я хочу, чтобы мое фоновое изображение покрывало 100% окна браузера, мне все равно, обрезано ли оно.Прямо сейчас в определенном размере, это обрезает внизу.Я попытался поместить фоновое изображение в селектор HTML в CSS вместо селектора тела, но это не сработало.Переполнение: скрытое сработало, но оно также отключило контент.Вот мой jsfiddle: https://jsfiddle.net/benmikola66/vu6btxpw/3/