Meu background image não mostra a imagem. onde errei? (ignorem o <p
vazio e a class texto1 no css vazia, foi um teste que fiz e decidi manter)HTML
<!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">
<title>AluraPlus</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section class="principal">
<h1 class="titulo">Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.</h1>
<img class="imagemCombo" src="Combo.png" alt="O Combo+ é uma função Alura!">
<p section class="texto1"></p>
</section>
</body>
</html>CSS
@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
:root {
--branco-principal: #FFFFFF;
--cinza-secundario: #C0C0C0;
--botao-azul: #167BF7;
--cor-fundo: #000000;
--cor-texto: #02fb04;
}
body{
background-color: var(--cor-fundo);
color: var(--branco-principal);
}
* {
margin: 0;
padding: 0;
}
.titulo {
font-family: 'Krona One', sans-serif;
justify-content: center;
font-size: 22px;
display: flex;
align-items: center;
}
.texto1 {
font-family: 'Krona One', sans-serif;
justify-content: center;
font-size: 16px;
display: flex;
align-items: center;
color: var(--cor-texto);
}
.imagemCombo {
background-image: url("Background.png");
}
