1
resposta

[Bug] Background color e background image

A cor de fundo do body deixa de existir e a img background não aparece

<!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 rel="stylesheet" href="styles/style.css">
    <title>Alura Plus</title>
</head>
    <body>
        <section class="container principal">
            <h1>Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.</h1>
            <img src="assets/Combo.png" alt="imagem tema">
        </section>




    </body>
</html>

A unica diferença é a ordem do "*" e o body

*{
    margin: 0;
    padding: 0;
}

:root{
    --cor-principal: #ffffff;
    --cor-secundaria: #c0c0c0;
    --cor-terciaria: #167BF7;
    --cor-fundo: #00030C;
}

body{
    background-color: var(--cor-fundo);
    color: var(--cor-principal);
}

.principal{
    background-image: url("assets/Background.png");
}

.container{
    height: 100vh;
}
1 resposta

Boa tarde Jean, tudo bem?

Nesta linha:

background-image: url("assets/Background.png");

Voce precisa deixar desta forma:

background-image: url("../assets/Background.png");

A diferença é o "../" antes da pasta "assests".

A razão disso é que voce esta uilziando o arquivo de estilo dentro da pasta "style", quando voce procura por "assets/Background.png" desta forma ele se baseia no local atual e nao existe uma pasta assets dentro da pasta styles.

Utilizando "../" a busca volt auma pasta acima (na raiz) onde existe a pasta "assets".

Abraço!