background with possition: Absolute; does not work

Asked

Viewed 27 times

-1

I am trying to build this site . I positioned the elements with position: Absolute; . I tried to add theinserir a descrição da imagem aqui background but it does not appear .inserir a descrição da imagem aqui 

.smartphone{
    background-color: grey;
   width: 400px;
   height: 80vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%)
}

.limitador {
    max-height: 80vh;
}
.discord{
    position: absolute;
    left: 50%;
    top: 80%;
    transform: translateX(-50%)
}

.card-esquerda{
    position: absolute;
    max-width: 20%;
    max-height: 10%;
    background-color: black;
    color: aqua;
    top: 80%;
}
.esquerda{

    background-color: black;

}

.direita{
    background-color: black;
}
.card-direita{
    position: absolute;
    max-width: 20%;
    max-height: 10%;
    background-color: black;
    color: aqua;
    top: 70%;
    right: 0%;
    transform: translateY(-50%)
    
}
.chamada{
    position: absolute;
    top: 20%;
    left: 10%;
    transform: translateY(50%)
}

.logo{
    position: absolute;
    top: 10%;
    right: 20%;
}

.barra-superior{
    position: absolute;
    top: 0%;
    left: 10%;
    transform: translateY(50%)
}
.layout{
    background: linear-gradient(90deg,#212121 50% , #424242 50%);
    width: 100vw;
    width: 100vh;
}
<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>Entre para a comunidade.</title>
        <link rel="stylesheet" href="materialize/css/materialize.css">
        <link rel="stylesheet" href="materialize/css/style.css">
    </head>
    <body>
        
      <div class="layout">
        <div class="smartphone">
          
          <button class="btn-large discord">Discord</button>
        </div>
  
        <div class="card-esquerda esquerda">
          <p>Queremos falar sobre tecnologia e nao sobre preco , mas se vcoe quiser a gente fala</p>
        </div>
        <div class="card-direita direita">
          <p>Queremos falar sobre tecnologia e nao sobre preco , mas se vcoe quiser a gente fala</p>
        </div>
  
        <div class="chamada">
          <h2>Vamos <br>Conversar</h2>
        </div>
  
        <div class="logo">
          <h2>logo</h2>
        </div>
  
        <div class="barra-superior">
            <h4>marca</h4>
        </div>
      </div>
        <script src="materialize/js/materialize.js"></script>
    </body>

</html>

html css

1 answer

2

Your CSS is wrong here, you wrote width 2x, should be width and height :D

inserir a descrição da imagem aqui

To the background be visible and accurate that the element has height (height), so just fix that your BG will work!

.layout{
    background: linear-gradient(90deg,#212121 50% , #424242 50%);
    width: 100vw;
    height: 100vh; /* coloque o VH no height */
}

Look at your code with that fixed.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Page Title</title>
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
	
	.smartphone{
    background-color: grey;
   width: 400px;
   height: 80vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%)
}

.limitador {
    max-height: 80vh;
}
.discord{
    position: absolute;
    left: 50%;
    top: 80%;
    transform: translateX(-50%)
}

.card-esquerda{
    position: absolute;
    max-width: 20%;
    max-height: 10%;
    background-color: black;
    color: aqua;
    top: 80%;
}
.esquerda{

    background-color: black;

}

.direita{
    background-color: black;
}
.card-direita{
    position: absolute;
    max-width: 20%;
    max-height: 10%;
    background-color: black;
    color: aqua;
    top: 70%;
    right: 0%;
    transform: translateY(-50%)
    
}
.chamada{
    position: absolute;
    top: 20%;
    left: 10%;
    transform: translateY(50%)
}

.logo{
    position: absolute;
    top: 10%;
    right: 20%;
}

.barra-superior{
    position: absolute;
    top: 0%;
    left: 10%;
    transform: translateY(50%)
}
.layout{
    background: linear-gradient(90deg,#212121 50% , #424242 50%);
    width: 100vw;
    height: 100vh;
}
	
</style>
</head>
<body>
	
		<div class="layout">
				<div class="smartphone">
				  
				  <button class="btn-large discord">Discord</button>
				</div>
		  
				<div class="card-esquerda esquerda">
				  <p>Queremos falar sobre tecnologia e nao sobre preco , mas se vcoe quiser a gente fala</p>
				</div>
				<div class="card-direita direita">
				  <p>Queremos falar sobre tecnologia e nao sobre preco , mas se vcoe quiser a gente fala</p>
				</div>
		  
				<div class="chamada">
				  <h2>Vamos <br>Conversar</h2>
				</div>
		  
				<div class="logo">
				  <h2>logo</h2>
				</div>
		  
				<div class="barra-superior">
					<h4>marca</h4>
				</div>
			  </div>
	
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.