Итак, я хочу, чтобы у моего сайта был первоначальный первый фон, похожий на тот, что был на на этом сайте.По какой-то причине картинка слишком велика, и я не могу изменить ее размер ни с помощью свойства position, ни даже свойства background-size независимо от всего, что я пробовал за последние 2+ дня.Мне также нужно, чтобы он был виден через прозрачную панель навигации, которую я имею.Затем я продолжил бы все содержимое веб-страницы под фоном.Кроме того, я новичок в этом веб-сайте, поэтому я не уверен, как вставить случайное изображение, чтобы служить примером проблемы, но вы можете увидеть в фрагменте, где я вставил изображение, как последний кусок кода в HTML.
Вот мой код:
/**********BODY GENERAL**********/
body {
margin: 0;
}
strong {
font-weight: bold;
}
/*********NAVIGATION*********/
nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1em;
grid-auto-rows: auto;
text-align: center;
align-items:center;
background: /*rgba(255, 51, 0, .95);
*/
list-style-type: none;
z-index: 10;
}
@media screen and (max-width: 900px) {
nav {
grid-template-columns: 100%;
grid-template-rows: auto;
grid-gap: 1em;
}
}
.menu1 {
grid-column: 1;
}
.menu2 {
grid-column: 2;
}
.logo {
grid-column: 3;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
font-size: 28px;
width:500px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 7vh;
margin-bottom: 25px;
color: #000;
text-transform: uppercase;
letter-spacing: 3px;
}
.menu3 {
grid-column: 4;
}
.menu4 {
grid-column: 5;
}
/**************HOVER ANIMATION**************/
div > a {
font-family: 'Raleway';
text-transform: uppercase;
text-decoration: none;
color: #000;
position: relative;
font-size: 0.8rem;
}
div > a:hover {
color: #000;
}
div > a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -4px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
div > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/**********MAIN HEADER***********/
header {
color: white;
justify-content: center;
align-content: center;
top: 0;
bottom: 0;
left: 0;
}
#header-div {
height: 100%;
width: 100%;
top: 0;
left: 0;
background: url(Images/BkgImg/HSNCT%202018%205th%20in%20Nation.jpg) no-repeat center;
position: absolute;
z-index: -5;
background-size: 275px 125px !important;
}
.titel-text {
color: #fff;
font-size: 10em;
text-align: center;
width: 100%;
padding-top: 100px;
}
/**********BODY*****************/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Centennial It's Academic</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
</head>
<body>
<header>
<nav class="container">
<div class="menu1">
<a class="navLinks" href="#home">Home</a>
</div>
<div class="menu2">
<a class="navLinks" href="#upcoming">Tournaments</a>
</div>
<div class="logo">
<p>It's Academic</p>
</div>
<div class="menu3">
<a class="navLinks" href="#history">History</a>
</div>
<div class="menu4">
<a class="navLinks" href="#faq">Contact Info</a>
</div>
</nav>
<!-- Background Image -->
<div id="header-div">
<img src="Images/BkgImg/It's%20Ac%20semi%20finals%202017-18%20%20(8).JPG">
</div>
</header>
<p> askdfhkjsdhfl;</p>
</body>
</html>