i posted a similar question a couple weeks ago and ive got things in place. but the content and footer DIVS are very much in the wrong place. i want them to print below the image for each page, so when the page is opened, my chosen image takes up the entire screen, but you can scroll down to see more content. right now it is still just displaying overtop of the image. i will give code snippits below for my home page and stylesheet (yes its for a school project so its random stuff)
body,
html {
height: 100%;
width: 100%;
font-size: 100%;
background-color: #333;
}
h1 {
font-size: 5em;
}
h2 {
font-size: 2.5em;
}
.content {
font-family: sans-serif;
margin: 10%;
font-size: 170%;
border: 10px outset orange;
color: white;
text-align: bottom;
padding: 1.5%;
line-height: 100%;
position: static;
border-style: solid;
border: 2px;
border-color: white;
background-color: pink;
}
.footer {
font-family: sans-serif;
margin: 10%;
font-size: 170%;
border: 10px outset orange;
color: white;
text-align: bottom;
padding: 1.5%;
line-height: 100%;
position: static;
border-style: solid;
border: 2px;
border-color: white;
background-color: purple
}
/* The hero image */
.hero-image {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("blackred.webp");
/* Set a specific height */
height: 100%;
width: 100%;
/* Position and center the image to scale nicely on all screens */
background-repeat: no-repeat;
background-size: cover;
margin-top: 0%;
margin-bottom: 0%;
margin-right: 0%;
margin-left: 0%;
position: absolute;
}
/* Place text in the middle of the image */
.hero-text {
font-family: 'Arial';
position: center;
margin-top: 10%;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
color: white;
text-align: center;
font-size: 150%;
}
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
/* Important for vertical align on mobile phones */
margin: 0;
/* Important for vertical align on mobile phones */
}
/* Add a red background color to navbar links on hover */
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: white;
color: black;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
.button {
background-color: black;
border: 2px solid white;
border-color: #FFFFF;
color: white;
padding: 10px 30px;
text-align: center;
display: inline-block;
font-size: 16px;
}
.button:hover {
background-color: white;
color: black;
}
.hero-image-valorant {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("valorant3.jpg");
/* Set a specific height */
height: 100%;
width: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: absolute;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
}
.hero-image-LOL {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("LOL1.jfif");
/* Set a specific height */
height: 100%;
width: 100%;
/* Position and center the image to scale nicely on all screens */
background-repeat: no-repeat;
background-size: cover;
position: absolute;
}
.hero-image-RL {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("RL1.webp");
/* Set a specific height */
height: 100%;
width: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: absolute;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
}<div class="navbar">
<a href="index.htm">Home</a>
<a href="signup.htm">Sign up</a>
<a href="about.htm">About us!</a>
<div class="dropdown">
<button class="dropbtn">Our teams ▼
</button>
<div class="dropdown-content">
<a href="LOL.htm">League of legends</a>
<a href="valorant.htm">Valorant</a>
<a href="RL.htm">Rocket league</a>
</div>
</div>
</div>
<div class="hero-image">
<div class="hero-text">
<img src="RCLOGO.png" alt="RCLOGO">
<h2>E sports team</h2>
<p>check out the navigation links above to learn about us!</p>
<p>OR:</p>
<a class="button" href="signup.htm">Join now</a>
</div>
<div class="content">
<p>CONTENT</p>
</div>
<div class="footer">
<p>FOOTER</p>
</div>
</div>I tried to change Absolute positioning to using percentages and margins, but this didnt work and the background image is the only thing that dosent seem to work without it. i was especting the image chosen to fill up the screen with a title text centered (this is working) and then scroll down to paragraphs of content(this is not working)
