I'm working on a mobile first project, it's a project on with HTML and CSS only, allowing us to learn how to do animation with CSS only. I have a problem with my project that I hope you can help me with.
Due to the circle animation when you load the page, the button "Explorer nos restaurants" is not working, like the animation is still there and overlapping the page, I can't find a way to avoid this..
Thanks in advance for all the help you can provide to me!
/* Barre de chargement */
.chargement {
width: 100%;
height: 100%;
position: absolute;
animation-name: loader;
animation-duration: 2s;
}
.chargement_bloc {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.chargement_bloc-cercle {
width: 130px;
height: 130px;
border-radius: 50%;
border: 15px solid #fff;
border-bottom-color: transparent;
animation-name: circle;
animation-duration: 2s;
animation-timing-function: ease-in-out;
visibility: hidden;
}
#keyframes circle {
0% {
visibility: visible;
transform: rotate(0deg);
}
99% {
visibility: visible;
transform: rotate(1500deg);
}
100% {
z-index: -1;
visibility: hidden;
}
}
#keyframes loader {
0% {
background-color: #9356DC;
z-index: 1;
}
99% {
z-index: 1;
background-color: #9356DC;
}
100% {
z-index: -1;
visibility: hidden;
}
}
/* + modifier media queries pc pour version feuille */
/* Header */
header {
box-sizing: border-box;
height: 4rem;
}
header h1 {
font-family: 'Shrikhand', sans-serif;
text-align: center;
margin-top: 1rem;
}
main {
width: 100%;
}
/* Localisation */
.localisation {
display: flex;
justify-content: center;
width: 100%;
background-color: #eaeaea;
height: 2.5rem;
align-items: center;
box-shadow: inset 0px 11px 3px -9px #CCC;
}
.localisation i {
margin-right: 0.5rem;
}
/* Réservation */
.reservation {
background-color: #f6f6f6;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.reservation h2 {
margin-bottom: 0;
margin-top: 3rem;
margin-right: 2rem;
margin-left: 2rem;
text-align: center;
}
.reservation p {
flex-wrap: wrap;
margin-bottom: 2rem;
margin-right: 2rem;
margin-left: 2rem;
text-align: center;
}
.reservation .btn {
display: block;
outline: none;
border: none;
cursor: pointer;
font-size: 16px;
font-family: 'Roboto', sans-serif;
color: #fff;
background-size: 200%;
background-image: linear-gradient(90deg, #FF79DA, #9356DC);
background-position: 80%;
text-decoration: none;
padding: 1rem 1rem 1rem 1rem;
border-radius: 2rem;
transition: all 0.4s ease-in-out;
box-shadow: 0 5px 5px #0000002e;
margin-bottom: 3rem;
}
.reservation .btn:hover {
transform: scale(1.05);
background-position: 30%;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<!--Meta-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ohmyfood - Page d'accueil</title>
<!--Link-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/accueil.css">
<!--FontAwesome-->
<script src="https://kit.fontawesome.com/ec6ba8c4d3.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Barre de chargement -->
<div class="chargement">
<div class="chargement_bloc">
<div class="chargement_bloc-cercle"></div>
</div>
</div>
<!-- Header -->
<header>
<h1>ohmyfood</h1>
</header>
<!-- Localisation -->
<main>
<div class="localisation">
<i class="fa fa-map-marker"></i>
<p>Paris, Belleville</p>
</div>
<!-- Réservation + Bouton -->
<section class="reservation">
<h2>Réservez le menu qui vous convient</h2>
<p>Découvrez des restaurants d'exception, sélectionnés par nos soins.</p>
<button class="btn" type="button" href="#restaurants">Explorer nos restaurants</button>
</section>
You just need to add animation-fill-mode: forwards; to the .chargement class so that it remains on the last frame
.chargement {
width: 100%;
height: 100%;
position: absolute;
animation-name: loader;
animation-duration: 2s;
animation-fill-mode: forwards;
}
Related
my "wrapper" div is the most outlayer container. It consists of a picure and some text below.
I want to use CSS (not yet learned JS...) method to realize the effect that, when mouse hovering over the picure area, the picure zoom-in a little, but still remain inside the shadowed box.
Below is my html code and css code. It did give me zoom-in effect, but the picture just ... stick out, how can I fix this (hopefully without using Javascript)
-- html code --
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>shadow block | link with graphics and info</title>
<link rel="stylesheet" type="text/css" href="sectionlink_pic.css">
</head>
<body>
<div class="wrapper">
<div class="image">
<img src="https://images.pexels.com/photos/262508/pexels-photo-262508.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
</div>
<div class="infocontent">
<h3>Home Security Blog</h3>
</div>
</div>
</body>
</html>
-- css --
.wrapper {
display: flex;
flex-direction: column;
width: 400px;
justify-content: center;
align-items: center;
border-radius: 3rem;
box-shadow: 0.6rem 0.6rem 1.2rem #d2dce9, -0.5em -0.5em 1em #ffffff;
padding: 2rem;
z-index: 100;
}
.wrapper:hover {
text-shadow: 5px 5px 4px lightgray;
transition-duration: 0.2s;
cursor: pointer;
}
.wrapper .image img {
width: 100%;
object-fit: cover;
border-radius: 2rem;
cursor: pointer;
}
.wrapper .image:hover img {
transform: scale(1.5);
}
.wrapper .infocontent {
display: flex;
justify-content: center;
align-items: center;
font-family: Consolas;
color: #36187d;
cursor: pointer;
}
body {
background-color: #f2f3f7;
padding-top: 90px;
padding-left: 100px;
}
Add transition to your image
Add overflow (hidden) and border-radius to the image wrapper DIV:
body {
background-color: #f2f3f7;
}
.wrapper {
display: flex;
flex-direction: column;
width: 400px;
justify-content: center;
align-items: center;
border-radius: 3rem;
box-shadow: 0.6rem 0.6rem 1.2rem #d2dce9, -0.5em -0.5em 1em #ffffff;
padding: 2rem;
z-index: 100;
transition-duration: 0.2s; /* ADD */
}
.wrapper:hover {
text-shadow: 5px 5px 4px lightgray;
cursor: pointer;
/*transition-duration: 0.2s; REMOVE */
}
.wrapper .image {
overflow: hidden; /* ADD */
border-radius: 2rem; /* ADD */
}
.wrapper .image img {
width: 100%;
object-fit: cover;
/* border-radius: 2rem; REMOVE */
cursor: pointer;
transition: transform 1s; /* ADD */
}
.wrapper:hover img { /* EDIT */
transform: scale(1.5);
}
.wrapper .infocontent {
display: flex;
justify-content: center;
align-items: center;
font-family: Consolas;
color: #36187d;
cursor: pointer;
}
<div class="wrapper">
<div class="image">
<img src="https://images.pexels.com/photos/262508/pexels-photo-262508.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
</div>
<div class="infocontent">
<h3>Home Security Blog</h3>
</div>
</div>
I'm trying to create a hover effect where words appear over the hero section when the mouse hovers over it. If you uncomment the code at the bottom of the CSS file you will see that the code works just fine. The only problem is the backround picture dispears and turns completely white. I don't know how to fix it.
Uncomment the code all the way at the bottom of the CSS to see what I'm talking about
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Kumbh Sans", sans-serif;
scroll-behavior: smooth;
}
.navbar {
background: #131313;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 555;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 20px;
}
#navbar__logo {
background-color: #ff8d02;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
#trade {
background-color: #0045f2;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
position: relative;
font-size: 13px;
bottom: 6px;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 120px;
text-decoration: none;
height: 100%;
transition: all 0.3s ease;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #833ab4;
background: -webkit-linear-gradient(to right, rgb(240, 105, 2), #8c8393, #4d7fff);
background: linear-gradient(to right, rgb(240, 105, 2), #8c8393, #4d7fff);
color: #fff;
transition: all 0.3s ease;
}
.navbar__btn:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
border-radius: 4px;
transition: all 1s ease;
}
.navbar__links:hover {
color: #ff7802;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 1;
transition: all 0.5s ease;
z-index: -1;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 60vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}
.navbar__item {
width: 100%;
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
/* Hero Section */
.hero {
padding: 50px 0;
background-image: url(./images/brooke-cagle-g1Kr4Ozfoac-unsplash.jpg);
background-size: cover;
overflow: hidden;
position: relative;
background-position: top;
display: flex;
flex-direction: column;
}
.hero__heading {
color: #fff;
font-size: 100px;
margin-left: 30px;
text-shadow: 2px 2px 8px #000000c4;
}
.orange {
color: rgb(255, 89, 0);
}
.main__btn {
margin: 0 auto;
margin-top: 3rem;
}
.main__btn a {
color: #fff;
text-decoration: none;
z-index: 2;
position: relative;
padding: 10px 20px;
font-size: 1.8rem;
}
.button__color {
background: -webkit-linear-gradient(to right, #1e5dff, rgb(255, 89, 0) );
background: linear-gradient(to right, #1e5dff, rgb(255, 89, 0));
}
/*
.hero_two {
position: relative;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
opacity: 0;
transition: all 0.25s ease;
}
.hero_two > * {
transform: translateY(20px);
transition: all 0.25s ease;
}
.hero_two:hover {
opacity: 1;
}
.hero_two:hover {
transform: translateY(0);
} */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pigeon</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
</head>
<body>
<!-- Navbar Section -->
<nav class="navbar">
<div class="navbar__container">
Pigeon<small id="trade">TRADE</small>
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Home
</li>
<li class="navbar__item">
About
</li>
<li class="navbar__item">
Services
</li>
<li class="navbar__btn">
Sign Up
</li>
</ul>
</div>
</nav>
<!-- Hero Section -->
<div class="hero_two hero" id="home">
<div class="hero__container">
<div class="image__overlay">
<div class="hero__content">
<h1 class="hero__heading">Get started <br>making your <span class="orange">online <br>business</span> today!</h1>
</div>
</div>
</div>
<div class="main__btn">
<button class="button button__color">Explore</button>
</div>
</div>
```
The problem is that you are overwriting the background-image property value from .hero when you add background: rgba(0, 0, 0, 0.6); for .hero_two
Use instead background-color: rgba(0, 0, 0, 0.6);
The property background is a shorthand for all background properties including background-image.
The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.
Read more here -> background property
See below
EDIT after comments:
You are using two classes on the SAME element. If you write some styles for hero_two it will overwrite the styles for hero. because you are selecting the same element.
If I understand correctly, you want to show an 'overlay' and make the text appear when hovering. You can use a pseudo-element for that ( :after in this case) and some tweaks in your css styling. ( Remove the hero_two classname because it's useless )
/* Hero Section */
.hero {
padding: 50px 0;
background-image: url("https://via.placeholder.com/150");
background-size: cover;
overflow: hidden;
position: relative;
background-position: top;
display: flex;
flex-direction: column;
}
.hero__heading {
color: #fff;
font-size: 100px;
margin-left: 30px;
text-shadow: 2px 2px 8px #000000c4;
}
.orange {
color: rgb(255, 89, 0);
}
.main__btn {
margin: 0 auto;
margin-top: 3rem;
}
.main__btn a {
color: #fff;
text-decoration: none;
z-index: 2;
position: relative;
padding: 10px 20px;
font-size: 1.8rem;
}
.button__color {
background: -webkit-linear-gradient(to right, #1e5dff, rgb(255, 89, 0));
background: linear-gradient(to right, #1e5dff, rgb(255, 89, 0));
}
.hero:after {
content: "";
position: absolute;
background-color: rgba(255, 255, 255, 0.6);
top: 0;
opacity: 0;
width: 100%;
height: 100%;
}
.hero * {
transform: translateY(20px);
transition: all 0.25s ease;
opacity: 0;
}
.hero:hover * {
transform: translateY(0px);
color: #ffffff;
opacity: 1;
}
.hero:hover:after {
opacity: 1;
}
<div class="hero_two hero" id="home">
<div class="hero__container">
<div class="image__overlay">
<div class="hero__content">
<h1 class="hero__heading">Get started <br>making your <span class="orange">online <br>business</span> today!</h1>
</div>
</div>
</div>
<div class="main__btn">
<button class="button button__color">Explore</button>
</div>
</div>
Next time please share only relevant code ( eg. navbar has nothing to do with this ) and take the time to make a code snippet like the one above that reproduces your problem. ( For images, please use a placeholder as we cannot use your own images 'cause we don't have them )
happy coding.
Like the title says, I spent something like an hour and I can't figure why it is not working.
I just wanted to change the color and the background-color while hovering the button(a), but, even if in other sites I have no problem with similar code, in this one it doesn't seem to work.
Please help I'm going mad.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Portfolio 2</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Main -->
<section id="main">
<div class="container">
<p>Hello, my name is</p>
<p><span>M</span>ateusz <span>L</span>ipski</p>
MY PORTFOLIO
</div>
</section>
<!-- End Main -->
</body>
</html>
CSS
#import url("https://fonts.googleapis.com/css2?
family=Dosis:wght#200;300;400;500;600;700;800&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "Dosis", sans-serif;
}
span {
color: rgb(9, 189, 165);
font-weight: 600;
}
.program {
font-size: 1.2rem;
margin-bottom: 25px;
}
/* Main */
#main {
position: relative;
background-image: url(https://images.unsplash.com/photo-1513530534585-c7b1394c6d51?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80);
background-size: cover;
background-position: top-center;
z-index: -1;
}
#main::after {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.3;
z-index: -1;
}
#main .container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
}
#main .container p {
position: relative;
color: transparent;
font-size: 2.5rem;
font-weight: 500;
margin-right: 300px;
line-height: 4rem;
animation: p_reveal 0.1s ease forwards;
}
#main .container p:first-of-type {
animation-delay: 1.2s;
}
#main .container p:nth-of-type(2) {
animation-delay: 2.7s;
}
#main .container span {
color: transparent;
animation: span_reveal 0.1s ease forwards;
animation-delay: 2.7s;
}
#main .container p::after {
content: "";
position: absolute;
height: 100%;
width: 0;
left: 0;
background-color: rgb(9, 189, 165);
overflow: hidden;
animation: box_reveal 1.5s ease forwards;
}
#main .container p:first-of-type::after {
animation-delay: 0.5s;
}
#main .container p:nth-of-type(2)::after {
animation-delay: 2s;
}
#main .container a {
padding: 10px 30px;
margin-right: 300px;
margin-top: 30px;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.2rem;
text-decoration: none;
border: 3px solid rgb(9, 189, 165);
color: rgb(9, 189, 165);
}
#main .container a:hover {
color: white;
background-color: rgb(9, 189, 165);
}
/* End Main */
You have an z-index on your main, thus you are not able to hover over your element.
if you set that z-index on your main to 1 for example, it will work.
/* Main */
#main {
position: relative;
background-image: url(https://images.unsplash.com/photo-1513530534585-c7b1394c6d51?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80);
background-size: cover;
background-position: top-center;
z-index: -1;
}
edit: this block to be exact.
Having an issue in which the body (and thus the rest of the containers on the page) are working fine on the responsive / fullscreen monitor mode, but when I toggle the device toolbar to see what it looks like on mobile, there is a noticable section to the right which i have no idea what/how/why it is there. Upon inspecting element it points to the html element but i have the width set to 100% and tried 100vw but nothing seems to work.
I am guessing it has something to do with the way %'s and vw's behave on mobile or possibly the way width works but am stumped and any help would be appreciated
EDIT: Reproducible code for the error (removed most other sections but the problem applies to all of them if i add it back
HTMLFILE:
<!DOCTYPE html>
<html lang="en">
<head>
<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="style.css" />
<link rel="manifest" href="favicon_io (1)/" />
<title>David Chin Personal Website</title>
</head>
<!-- Header Section-->
<body>
<section class="header">
<div class="header-container">
<div class="col-1">
<h2 class="expand">Dev</h2>
<h2 class="expand">Chin</h2>
</div>
<div class="col-2">
<img src="assets/img/test.png" alt="test" />
</div>
</div>
</section>
<script src="assets/js/main.js"></script>
</body>
</html>
CSS FILE:
html {
margin: 0;
padding: 0;
width: 100%;
border: 10px solid red;
}
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: "Roboto Mono", monospace;
border: 10px solid blue;
box-sizing: border-box;
background: pink;
}
.section-intro {
margin-left: 10%;
}
.header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 90vh;
width: 100%;
animation: 0.5 header ease 1.25s;
}
#media only screen and (min-width: 768px) {
.header {
display: flex;
}
}
.header-container {
display: flex;
flex-direction: row;
width: 100%;
margin: 0;
}
.header-container .col-1 {
display: flex;
flex-direction: column;
width: 50%;
animation: fadein 0.8s linear forwards;
}
.header-container .col-2 img {
opacity: 0;
animation: 0.5s fadein ease 1.25s;
animation-fill-mode: forwards;
}
.header-container h2 {
margin-block-start: 0;
margin-block-end: 0;
}
.header-container .col-2 {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
z-index: -1;
}
.header-container .expand {
color: black;
padding: 0;
margin: 0;
overflow: hidden;
font-size: 15rem;
white-space: nowrap;
width: 1ch;
animation: 0.5s expand ease-in-out;
animation-delay: 1.25s;
animation-fill-mode: forwards;
transform: translateX(50vw);
text-shadow: 2px 2px 6px grey;
}
/* Short term fix on text overflow */
#keyframes expand {
0% {
width: 1ch;
font-size: 15rem;
}
80% {
min-width: 330px;
}
100% {
font-size: 7rem;
transform: translateX(20vw) translateY(8rem);
min-width: 330px;
}
}
.header-container .img {
border: 2px solid black;
padding: 3rem;
background: rgba(0, 0, 0, 0);
opacity: 0;
animation: 1s fadein linear;
animation-delay: 1.25s;
animation-fill-mode: forwards;
max-width: 375px;
max-height: 375px;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
So I want to make my website have an initial first background sort of like the one on this website. For some reason, the picture is way too big and I can't resize it with any position property or even the background-size property regardless of everything I have tried for the past 2+ days. I also need it to be visible through the transparent nav-bar I have. I would then continue all the content of the webpage underneath the background. Also, I am new to this website so I'm not sure how to insert a random image to serve as an example of the problem, but you can see in the snippet where I inserted the image as the last piece of code in the HTML.
Here is my code:
/**********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>
Sounds like you need to add a background-size: cover. Remove your div and img tags and then wrap your header tags with a div and add a class bg-img to it. Then add this following CSS:
.bg-img {
background: url(''https://images.unsplash.com/photo-1508781015212-46d58946bb05?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39b69f4b9e54ea449f90e3d714bf9215&auto=format&fit=crop&w=1951&q=80) no-repeat center center;
background-size: cover;
height: 100vh;
}