I'm completely new to coding in HTML and CSS, so please excuse any mistakes I may make.
Currently, I am working on a website using HTML and CSS, and I want the user to scroll down in order to view the content that comes after the logo and tagline. When I try to add an image, it appears below the logo which is not what I want. Is there a way to ensure that the user has to scroll down to see the rest of the content?
Thank you for your understanding and help!
Edit: Here is the code snippet:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="styles.css" />
</head>
<body class="body" style="overflow-y:hidden">
<center>
<div class="main"><br><br><br><br><br><br><br>
<img class="logo" src="logo.png">
<div class="tiles">
<button class="t1"></button>
<button class="t2"></button>
<button class="t3"></button>
<button class="t4"></button>
<button class="t5"></button>
<button class="t6"></button>
<button class="t7"></button>
<button class="t8"></button>
</div>
</div>
</center>
</body>
</html>
CSS:
.body {
background-color: #ffffff;
background-image:url(background.jpg);
}
.logo {
position: absolute;
left: 42%;
top: 25%;
}
.tiles{
position: absolute;
bottom: 20%;
white-space:nowrap
}
.t1 {
background-image:url(tiles/t1.jpg);
height:119px;
width:210px;
border:0px solid #ffffff;
}
.t1:hover{
background-image:url(tiles/t1-1.jpg)
}