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

Imagem background não aparece na pagina.

Referente ao curso HTML e CSS: praticando HTML/CSS, no capítulo Iniciando o projeto e atividade Inserindo imagens

por Arthur Elle dos Santos Lara
| 20k xp | 65 posts

Olá, boa noite.

Li outras resposta, comprei o meu código com o da instrutora e apesar de aparentemente tudo estar certo não aparece a imagem.

<!DOCTYPE html>

<html>
    <head>
        <title>Alura Plus</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <selection src="container principal">
            <h1>Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.</h1>
            <img src="img/Combo.png" alt="Alura + Alura linguas = Combo Alura Plus">
        </selection>
    </body>
    </html>
:root {
    --branco-principal: #ffffff;
    --cinza-secundario: #C0C0C0;
    --botão-azul: #167BF7;
    --cor-de-fundo: #00030C;
}

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

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

.container {
    height: 100vh;
}

Se puderem me ajudar agradeço.

2 respostas
solução!
por Renan Lima
| 3628.3k xp | 7650 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Arthur.

Tudo bem?

Tem alguns detalhes que precisam ser corrigidos.

Depois da tag de abertura do <body> tem a <section> porém a sua section está escrita errada, está <selection>, o correto é <section>, e nessa mesma section você chamou as classes com o atributo src, sendo que o atributo src é para o caminho de imagem, você precisa utilizar a palavra class, Veja Corrigido:

<!DOCTYPE html>

<html>
    <head>
        <title>Alura Plus</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </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="img/Combo.png" alt="Alura + Alura linguas = Combo Alura Plus">
        </section>
    </body>
</html>

Espero ter ajudado. Qualquer dúvida manda aqui de novo.

por Arthur Elle dos Santos Lara
| 20k xp | 65 posts

Valeu, realmente como eu não vi isso kfkfk. Mas valeu mesmo.