Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Bug] A background image não aparece

Referente ao curso HTML e CSS: praticando HTML/CSS

por Gabriel Machado Damião
| 53.3k xp | 4 posts

Baixei os arquivos do Figma e coloquei em uma pasta "assets", segui o passo-a-passo mas a imagem não apareceu.

<!DOCTYPE html>
<html lang="pt-br">
<header></header>
<head>
    <title>Alura Plus</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>
    <section class="principal container">
        <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="O Combo+ é a junção do Alura+ e o Alura Língua">
    </section>
</body>
<footer></footer>
</html>
:root {
    --cor-pri: #FFFFFF;
    --cor-sec: #C0C0C0;
    --cor-ter: #167BF7;
    --cor-fundo: #00030C;
}

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

* {
    margin: 0;
    padding: 0;
}

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

.container {
    height: 100vh;
}

Print do site, sem a imagem

3 respostas
solução!
por gustavo luan leite de araujo
| 77.4k xp | 76 posts
WebHelp

Isso depende do local onde você está chamando o arquivo CSS.

Se você está chamando o arquivo CSS de um diretório diferente do diretório que contém a pasta "assets", então é necessário usar a notação "../" antes de "assets".

Por exemplo, se o seu arquivo CSS estiver em uma pasta chamada "css", que está no mesmo nível que a pasta "assets", você deve usar a seguinte notação:

css

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

Isso significa "subir um nível acima do diretório atual e, em seguida, ir para a pasta assets para encontrar o arquivo Background.png".

Se o arquivo CSS e a pasta "assets" estiverem no mesmo diretório, você pode usar o caminho relativo simples que você está usando atualmente:

Seu CSS

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

Se o arquivo CSS e a pasta "assets" estiverem no mesmo diretório, você pode usar o caminho relativo simples que você está usando atualmente:

Espero ter ajudado!

[Gustavo Araujo]

por Gabriel Machado Damião
| 53.3k xp | 4 posts

Obrigado, ajudou muito!

por gustavo luan leite de araujo
| 77.4k xp | 76 posts
WebHelp

Disponha ;)