The idea is to create an area for a new theme, scrolling website
The idea is for the images to be joined together to form one, but separating the home page from a new section, where I will introduce some information
What happens to me is that it becomes disproportionate and every time I change the size of the window the image is not the correct size.
body {
margin: 0vw;
padding: 0vw;
background-image: url(homepage.png);
background-size: cover;
background-repeat: no-repeat;
}
.title {
color: white;
text-align: center;
align-items: center;
justify-content: center;
font-size: 15vw;
font-family: titlefont;
}
.text1 {
color: white;
text-align: center;
align-items: center;
justify-content: center;
font-size: 1.5vw;
font-family: maintext;
line-height: 0;
}
.maintextfield {
margin-top: 10vw;
}
.container {
position: absolute;
background-image: url(about.png);
background-repeat: no-repeat;
padding: 30vh;
margin-top: 32vh;
border-color: transparent;
}<body>
<div class="navbar">
<ul>
<li><a href="">Cordenadas</a></li>
<li><a href="">As Suas Luas</a></li>
<li><a href="">Sobre o Planeta</a></li>
</ul>
</div>
<div class="maintextfield">
<div class="title">
<p1>Jupiter.</p1>
</div>
<div class="text1">
<p2>An Website about the biggest Planet in Solar System</p2>
</div>
</div>
<div class="container">
<div class="aboutxt">
<h1>Sobre o Planeta</h1>
</div>
<div class="aboutxt2"></div>
</body>3