Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Imagem não aparece

adicionei o imagem na classe .banner com o background: url(../../imagens/banner.jpeg); mas a imagem não está aparecendo

HTML

<!DOCTYPE html>
<html lang="en">

    <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>Alura SPA</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link
            href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
            rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
            integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
            crossorigin="anonymous" referrerpolicy="no-referrer" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
        <link rel="stylesheet" href="./styles/style.css">
    </head>

    <body>

        <header>
            <nav>
                <ul>
                    <li>
                        <a href="">Serviços</a>
                    </li>
                    <li>
                        <a href="">Curiosidades</a>
                    </li>
                    <li>
                        <a href="">Nosso espaço</a>
                    </li>
                </ul>
            </nav>
            <section class="banner">
                <div class="inner-banner">
                    <h1>Alura SPA</h1>
                    <h2>Venha viver o seu melhor dia!</h2>
                </div>
            </section>
        </header>

        <!-- Codigo omitido -->

    </body>
</html>

Style.scss

@import "./abstract/base";
@import "./components/navbar";
@import "./components/banner";

_Banner.scss

.banner {
   background: url(../../imagens/banner.jpeg);
}
3 respostas
solução!

Fala Matheus, tudo bem?

Nesta atividade https://cursos.alura.com.br/course/sass-css-sintaticamente-espetacular/task/102580 é explicado de forma detalhada sobre a imagem do banner.

Com base no código que compartilhou, faça por gentielza os seguintes passos:

  • altere o caminho da imagem
background: url(../imagens/banner.jpeg) 27% center no-repeat;

Em seguida, rode o compilador do sass e faça um novo teste e nos diga se deu certo.

Funcionou e agora entendi o erro. Quando eu estava no arquivo banner.scss caminho relativo até a imagem era ../../imagens/banner.jpeg, mas ai quando o compilador rodava gerava um arquivo style.css q ficava fora da pasta components onde o banner.scss ficava fazendo com que o caminho relativo até a imagem mudasse para ../imagens/banner.jpeg

AI sim Matheus, que bom que deu certo. Bons estudos e sucesso na sua jornada!