Estou com dificuldade para deixar o background correto, pois, tem uma grande parte sobrando e eu não queria que ele tivesse a barra de rolagem tão grande na parte embaixo. Se eu alterar o width e o height do .cadastrobox, eu somente altero o fundo preto e não a imagem do salão. Antes, aparecia uma parte do fundo em branco. Aí coloquei o (background-attachment: fixed;) e isso resolveu essa parte do meu problema, mas, agora tem uma grande parte desnecessária do fundo dando continuidade. E eu gostaria que aonde existia a parte em branco, era aonde deveria ser o limite final da imagem. E eu não sei muito bem como alterar isso, pois sou iniciante nesse assunto. [![Antes do background-attachment: fixed][1]][1] [![Depois do background-attachment: fixed][2]][2]
border: 0;
}
body {
margin: 0;
padding: 0;
background-image: url(../imagens/salao.jpg);
background-attachment: fixed;
font-family: sans-serif;
background-size: cover;
justify-content: center;
background-repeat: no-repeat;
}
h1 {
margin: 0;
padding: 0, 0, 20px;
text-align: center;
font-size: 22px;
}
h2, h4 {
text-align: center;
}
.cadastrobox {
width: 870px;
height: 780px;
background: rgba(0, 0, 0, .8);
box-shadow: 0 15px 25px rgba(0, 0, 0, .5);
color: white;
top: 60%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 40px 30px;
}
.cadastrobox i {
width: 26px;
}
.cadastrobox p {
margin: 0;
padding: 0;
font-weight: bold;
display: inline-block;
}
.cadastrobox input {
width: 100%;
margin-bottom: 20px;
display: block;
}
.cadastrobox input[type="email"],
input[type="password"], input[type="date"], input[type="text"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
width: 40%;
}
.cadastrobox input[type="submit"] {
border: none;
outline: none;
height: 40px;
background: #d84b6b;
color: #fff;
font-size: 18px;
border-radius: 20px;
width: 25%;
margin-left: 37.5%;
}
.cadastrobox input[type="submit"]:hover {
cursor: pointer;
background-color: #c54e6a;
color: #fff;
}
.cadastrobox a {
text-decoration: none;
font-size: 14px;
line-height: 20px;
color: #fff;
}
.cadastrobox a:hover, input:hover, i:hover, p:hover{
color: #d84b6b;
border-bottom-color: #d84b6b;
}
.links {
text-align: center;
}
.flex{
display: flex;
gap: 30px;
}
.flex .input-wrapper{
width: 50%;
}
.flex .input-wrapper .input-img{
position: relative;
}
.flex .input-wrapper input{
width: 90%;
text-indent: 30px;
}
.flex .input-wrapper .input-img i{
position: absolute;
top: 11px;
left: 0;
}
.input-cadastre {
margin-left: 18%;
width: 80rem;
}
.input-cadastre .input-imgs{
position: relative;
}
.input-cadastre input{
text-indent: 30px;
}
.input-cadastre .input-imgs i{
position: absolute;
top: 11px;
left: 0;
}
.cadastrobox #politic{
margin-left: 25% ;
}
/* Responsivo utilizado para tamanho de ipad */
@media only screen and (max-width: 800px){
.form {
width: 100%;
}
}
/* Responsivo utilizado para tamanho de celular */
@media only screen and ( max-width: 480px) {
.container .name h1 {
font-size: 30px
}
.container .name h5 {
font-size: 15px
}
/* é melhor colocar em porcentagem, para que o texto tenha respiro na tela */
#about p{
max-width: 80%;
text-align: justify;
}
}```
``` <!DOCTYPE html>
<html lang="pt-br">
<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">
<link href="Imagens/R.png" rel="icon" />
<link rel="stylesheet" href="css/cadastro.css">
<title>Royal Hair</title>
</head>
<body>
<div class="cadastrobox">
<h1>Quero Criar uma Conta</h1>
<h4>Precisamos coletar algumas informações para seu tratamento de realeza, vamos lá?</h4>
<br>
<form>
<div class="input-cadastre">
<p>Email </p>
<div class="input-imgs">
<input type="email" name="Email" placeholder= "Email">
<i class="fas fa-envelope"></i>
</div>
</div>
<div class="input-cadastre">
<p>Senha </p>
<div class="input-imgs">
<input type="password" name="senha" placeholder="*********">
<i class="fas fa-lock" aria-hidden="true"></i>
</div>
</div><br>
<h2>Dados Pessoais</h2>
<br>
<fieldset class="flex">
<div class="input-wrapper">
<p>Nome </p>
<div class="input-img">
<input type="text" name="Nome" placeholder="Nome">
<i class="fas fa-user"></i>
</div>
</div>
<div class="input-wrapper">
<p>Sobrenome </p>
<div class="input-img">
<input type="text" name="Senha" placeholder="Sobrenome">
<i class="fas fa-user"></i>
</div>
</div>
</fieldset>
<fieldset class="flex">
<div class="input-wrapper">
<p>CPF</p>
<div class="input-img">
<input type="text" name="CPF" placeholder="CPF">
<i class="far fa-address-card"></i>
</div>
</div>
<div class="input-wrapper">
<p>Data de nascimento</p>
<div class="input-img">
<input type="text" name="Data" placeholder="dd/mm/aaaa">
<i class="far fa-calendar-alt"></i>
</div>
</div>
</fieldset>
<fieldset class="flex">
<div class="input-wrapper">
<p>Telefone </p>
<div class="input-img">
<input type="text" name="Telefone" placeholder="Telefone">
<i class="fas fa-phone-square-alt"></i>
</div>
</div>
<div class="input-wrapper">
<p>CEP </p>
<div class="input-img">
<input type="text" name="CEP" placeholder="CEP">
<i class="fas fa-map-marked"></i>
</div>
</div>
</fieldset>
<div>
<input class="form-check-input" type="checkbox" id="gridCheck">
<label for="gridCheck" id="politic">
Li e aceito a <a href="Politica.html">Politica de Privacidade</a> da empresa Royal Hair
</label>
</div><br>
<br>
<input type="submit" name="Enviar" value="Cadastrar">
<br>
</form>
</div>
<script src="https://kit.fontawesome.com/d010f99425.js" crossorigin="anonymous"></script>
</body>
</html>```
[1]: https://i.sstatic.net/6QM8C.jpg
[2]: https://i.sstatic.net/I1WHZ.jpg