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

Imagem importada pelo css nao aparece

por Luiz Felipe
| 64.7k xp | 10 posts

Bom dia colegas :)

-Estou importando uma imagem direto pelo css pelo body e nao esta puxando, ja tentei usando uma classe sem sucesso alem de criar uma div dentro do body , alem de usar propiedades background e backgound-image. -Quando tento direto pela tag styles no html ela funciona mas nao é o ideal queria que a mesma ficasse pelo css. -A interação do css com html esta ok , visto que a navBar e outras incrementações estão puxando corretamente.

-Atualmente ela esta assim no HTML e usei a mesma no css sem o style.Abaixo é o codigo que funciona no HTML.

<body class="fundo-home">
    <style>
        .fundo-home{
            background: url("assets/img/background01.jpg");
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-size:cover ; 
            background-position: center; 
        }
    </style>
    </body>

-Ja fiz muitos testes e nao sei o motivo da imagem nao estar sendo puxada, mas preciso que a imagem fique no BODY da pagina. Se alguem puder me dar alguma dica pra conseguir usar essa classe no css =*( Obrigado

2 respostas
solução!
por Victor Costa Santos
| 1780.5k xp | 3417 posts
Alura Scuba Team Monitor de ForumOps

Olá, Luiz!

Pelo que você descreveu, parece que o caminho para a imagem que você está tentando usar pode estar incorreto no arquivo CSS. Quando você usa o CSS dentro do HTML (como você fez no exemplo que funcionou), o caminho para a imagem é relativo ao arquivo HTML. No entanto, quando você move o CSS para um arquivo externo, o caminho para a imagem se torna relativo ao arquivo CSS.

O seu CSS pode ficar assim, caso ele esteja numa pasta de estilização:

.fundo-home{
    background: url("../assets/img/background01.jpg");
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-size:cover ; 
    background-position: center; 
}

Uma dica é dar um CTRL+ clique sobre o link(assets/img/background01.jpg), e verifique se o link vai para o arquivo correto.

Espero que isso resolva o seu problema. Lembre-se, o caminho da imagem no CSS deve ser relativo ao local do arquivo CSS. Se precisar de mais ajuda, compartilhe mais contexto sobre o seu projeto. Se possível, compartilhe trechos de código e a sua estrutura de pastas. Em caso de persistência do erro, agradeço antecipadamente. Abraços e até mais!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Espero ter ajudado e bons estudos!

por Luiz Felipe
| 64.7k xp | 10 posts

Foi como voce disse mesmo, foi falta de atenção por algo bem bobo. O arquivo css estava dentro da assets em uma pasta

Index.html(arquivo na raiz) Assets(pasta) ->CSS(pasta) ---->styles.css ->img(pasta) ---->background01.jpg

Logo o correto era:

background-image: url("../img/background01.jpg");

Obrigado :)