Consegue dizer o quê está errado no codigo para minhas imagens não aparecerem?
Solucionado
Consegue dizer o quê está errado no codigo para minhas imagens não aparecerem?
atualizei e tirei tudo das pastas para tentar deixar mais facil a leitura mas não funcionou de qualquer jeito. Agr o codigo esta assim (e as imagens ainda não aparecem):
CSS:
:root {
--texto-principal: #FFFFFF;
--texto-secundario: #C0C0C0;
--botao-principal: #167BF7;
--cor-de-fundo: #00030c;
}
body {
background-color: var(--cor-de-fundo);
color: var(--texto-principal);
}
* {
margin: 0%;
padding: 0%;
}
.principal {
background-image: url(img/background.png);
background-repeat: no-repeat;
background-size: contain;
}
.container {
height: 100vh;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>IAprendiz.</title>
<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 rel="stylesheet" href="./styles/style.css">
</head>
<body>
<section class="container principal">
<h1>Aprenda a usar a inteligência artificial... De forma inteligente!</h1>
<img src="img/logo.png" alt="logo referente ao valor promocional do curso">
</section>
</body>
</html>
Oi, Francis!
Com essa estrutura de pastas que você mostrou, as imagens estão dentro da pasta assets/, e não em img/. Isso muda os caminhos tanto no CSS quanto no HTML.
Faça assim:
Estrutura correta que você já tem:
Projeto
├── index.html
├── assets/
│ ├── background.png
│ ├── logo.png
│ └── rotating.gif
└── styles/
└── style.css
Corrija o CSS (styles/style.css):
Como o CSS está dentro de styles/, para acessar assets/ é preciso voltar uma pasta (..).
.principal {
background-image: url(../assets/background.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
Corrija o HTML (index.html):
Como index.html está no mesmo nível da pasta assets/, basta chamar direto assets/arquivo.
<!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>IAprendiz.</title>
<link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<section class="container principal">
<h1>Aprenda a usar a inteligência artificial... De forma inteligente!</h1>
<img src="assets/logo.png" alt="logo referente ao valor promocional do curso">
</section>
</body>
</html>
background.png ≠ Background.png). Espero ter ajudado, conte com o apoio do fórum :)
Abraços e bons estudos!