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

Praticando CSS e importação de jpg. ;)

Referente ao curso HTML5 e CSS3 parte 1: crie uma página da Web, no capítulo Trabalhando com CSS e atividade Para saber mais: CSS externo

por Matheus Mariano Rocha
| 100.6k xp | 29 posts
Assistente de Processos e Qualidade

Eai! Estou testando algumas funções para importação de imagens e neste caso já conseguir colocar a foto no "site". Entretanto, pra ficar mais organizado, gostaria de entender como armazenar a source da foto no .css e puxar esta mesma imagem no arquivo .html.

Valeu !

pam.html

<!DOCTYPE html>
<html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <title>Pâmela Medeiros</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <h1 style="text-align: center"> Pâmela Medeiros
        <p></p>
        <img src="css/foto.jpg" alt="">
        <p style="text-align: center"><em>Crie Seu Próprio Padrão de Beleza!</em></p>

    </body>
</html>

style.css

<img src="css/foto.jpg" alt="">
2 respostas
solução!
por Lorena Garcia
| 8164k xp | 11904 posts
Alura Scuba Team Suporte Educacional

Oi Matheus, tudo certo?

Mais pra frente você vai entender quais as diferenças de colocar uma imagem no HTML ou no CSS, mas vou fazer um resumo. No CSS você vai colocar imagens que você acha que não impactam para que uma pessoa possa entender o que você quer repassar no seu site, pois elas no CSS não serão lidas.

Tem as questões de acessibilidade também, com suas imagens no HTML e com a tag alt bem preenchida os leitores de telas conseguem informar para uma pessoa com deficiência visual exatamente o que tem no seu site.

E também ajuda o seu site a ranquear no Google.

Mas quanto a sua dúvida de como fazer para usar imagens no CSS:

Você pode usar um link sendo uma url

body {
   background-image: url("https://cdn.pixabay.com/photo/2022/02/15/19/39/panda-7015575_960_720.jpg");
   height: 500px;
   width: 100%;
}

Ou pode usar um caminho local, ou seja, de uma imagem que esteja em sua máquina:

body {
   height: 400px;
   width: 100%;
   background-image: url("./images/panda.jpg");
}

No curso você verá isso na hora de fazer ofooter, então vai ficar mais claro :D

Espero ter ajudado e bons estudos!

por Matheus Mariano Rocha
| 100.6k xp | 29 posts
Assistente de Processos e Qualidade

Perfeito Lorena ! Muito obrigado pela ajuda e disponibilidade. Curti a foto de background btw kkkkk