Я пытаюсь реализовать полноэкранный градиент на целевой странице.Я использую начальную загрузку, и если я использую тег HTML в файле CSS, он покрывает экран ниже конца содержимого, но если я использую тег body, то он покрывает противоположное, что является всем содержимым. bodyснимок экрана с градиентной обложкой
/* Title Section */
#title {
padding-top: 22%;
}
h1 {
text-align: center;
font-size: 60px !important;
}
.title-buttons {
padding-top: 2%;
}
.title-btn1 {
margin-left: 35%;
}
.title-btn2 {
float: right;
margin-right: 35%;
}
body {
background-color: #FF3CAC;
background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
background-repeat: no-repeat;
background-repeat: no-repeat;
background-size: cover;
min-width: 100%;
min-height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Alec Klem</title>
<link rel="stylesheet" href="/Users/alecklem/Desktop/Web Development/MySite/MySite-Master/css/style.css">
<!-- Bootstrap MDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
<section id="title" class="">
<h1>Which website would you like to see?</h1>
<div class="title-buttons">
<a href="/Users/alecklem/Desktop/Web Development/MySite/MySite-Master/professional.html"><button type="button" class="btn btn-light btn-lg title-btn1">Professional</button></a>
<a href="/Users/alecklem/Desktop/Web Development/MySite/MySite-Master/educational.html"><button type="button" class="btn btn-light btn-lg title-btn2">Educational</button></a>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
Я знаю, что код на экране еще не реагирует, но если вы можете посмотреть его в полноэкранном режиме, он должен выглядеть так, как будто на нем есть мой скриншот.Что мне нужно сделать, чтобы градиент занимал весь экран?