Solucionado
Não consigo colocar a imagem de fundo do site da barbearia criado no curso de Html e css aqui da alura, como eu faço? Segui exatamente o que esta pedidno o video, estou usando o vsCode.
Essa imagem que não estou conseguindo é a imagemde fundo do rodapé
Olá Carlos, tudo bem?
Você poderia colocar o seu código HTML e CSS completo para que possamos visualizar melhor o que pode estar ocorrendo e tentar te ajudar?
Além disso, peço que verifique se a imagem foi extraída ao baixar e se está localizada na mesma pasta que o seu arquivo index.html.
Fico no aguardo, abraços!
Arquivo CSS
header{
background: #bbbbbb;
padding: 20px 0;
}
.caixa{
position: relative;
width: 940px;
margin: auto;
}
nav {
position: absolute;
top: 110px;
right: 0;
}
nav li {
display: inline;
margin: 0 0 0 15px;
}
nav a {
text-transform: uppercase;
color: #000000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
nav a:hover{
color: #C78C19;
text-decoration:underline;
}
.produtos{
width: 940px;
margin: 0 auto;
padding: 50px 0;
}
.produtos li{
display: inline-block;
text-align: center;
width: 30%;
vertical-align: top;
margin: 0 1.5%;
padding: 30px 20px;
box-sizing: border-box;
border: 2px solid #000000;
border-radius: 10px;
}
.produtos li:hover{
border-color: #C78C19;
}
.produtos li:active{
border-color: #088C19;
}
.produtos li:hover h2{
font-size: 34px;
}
.produtos h2{
font-size: 30px;
font-weight: bold;
}
.produto-descricao{
font-size: 18px;
}
.produto-preco{
font-size: 22px;
font-weight: bold;
margin-top: 10px;
}
footer{
text-align: center;
background: url("bg.jpg");
padding: 40px 0;
}
.copyright{
color: #FFFFFF;
font-size: 13px;
margin: 20px 0 0;
}
html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Produtos - Barbearia</title>
<link rel="stylesheet" href="_css/reset.css">
<link rel="stylesheet" href="_css/produtos.css">
</head>
<body>
<header>
<div class="caixa">
<h1><img src="_img/logo.png" alt=""></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="produtos.html">Produtos</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</div>
</header>
<main>
<ul class="produtos">
<li>
<h2>Cabelo</h2>
<img src="_img/cabelo.jpg" alt="">
<p class="produto-descricao">Na tesoura ou máquina, como o cliente preferir.</p>
<p class="produto-preco">R$ 25,00</p>
</li>
<li>
<h2>Barba</h2>
<img src="_img/barba.jpg" alt="">
<p class="produto-descricao">Corte e desenho profissional de barba</p>
<p class="produto-preco">R$ 18,00</p>
</li>
<li>
<h2>Cabelo + Barba</h2>
<img src="_img/cabelo+barba.jpg" alt="">
<p class="produto-descricao">Pacote completo de cabelo e barba</p>
<p class="produto-preco">R$ 35,00</p>
</li>
</ul>
</main>
<footer>
<img src="_img/logo-branco.png">
<p class="copyright">© Copyright Barbearia - 2021</p>
</footer>
</body>
</html>Muito obrigado por me ajudar, esses são os códiso exatamente o que esta sendo passado no curso
Opa Carlos, obrigada pelo retorno :)
O que está ocorrendo é que a imagem não está sendo localizada.
Nos cursos de HTML e CSS, as imagens, estilos e páginas encontram-se juntas dentro da pasta raiz do projeto, ou seja, não estão se organizando separadamente de acordo com as suas respectivas categorias. Sendo assim, quando o instrutor escreveu background: url("bg.jpg");, a imagem foi localizada e exibida.
Entretanto, notei que no seu projeto as imagens estão dispostas dentro de uma pasta destinada só para elas. Dessa forma, no CSS quando passamos o caminho da imagem de fundo para localizarmos, temos que fazer da mesma forma que fizemos no HTML anteriormente com as outras imagens, especificando o caminho completo.
Modificando, o código ficará assim:
footer{
text-align: center;
background: url("_img/bg.jpg");
padding: 40px 0;
}Teste e veja se soluciona a questão, fico no aguardo para saber!
Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!
Sim, obrigado rs.
Eu ja tinha colocado dessa forma, e mesmo assim na hora de atualizar a página não aconteceu nada, o que era para ter acontecido (era para ter entrado uma imagem preta no fundo).
Carlos,
Simulei as suas organizações de pastas e testei os códigos que você enviou com a modificação que te passei e obtive o resultado esperado, com a imagem preta de fundo.
Sendo assim, vou pedir que faça os seguintes passos para que possamos verificar.
background: url("_img/bg.jpg");O código que você enviou não contém a modificação, mas como você citou que já havia feito essa antes e não havia funcionado, provavelmente é porque a imagem não estava na localização que estava sendo chamada e/ou o arquivo CSS não havia sido salvo antes de atualizar a página.
Aguardo para saber se funcionou.
Obrigado Beatriz haha, infelizmente não esta rodando, deu uma pesquisada também para ver se encontrava solução, mas não consegui, e claro que fiz exatamente o que voce me passou, mas não esta indo, era para estar indo, como voce disse voce testou e deu certo.
Muito obrigado pela ajuda
Opa, Carlos!
Me desculpa, na hora de colar o código aqui acabei copiando uma versão que não era a última, tente colocarbackground: url("../_img/bg.jpg"), pois é necessário subir um nível a mais para localizar essa imagem.
Peço desculpas novamente pelo equívoco.
Poxa vida kkk, muito obrigado pela ajuda e paciência, deu certo agora, vou me atentar a esses detalhes a partir de agora rs.
Tenha uma ótima tarde Beatriz, tudo de bom pra voce.
Imagina, estou aqui para ajudar! Fico muito feliz que deu certo.
Desculpas mesmo pelo erro.
Qualquer dúvida ou dificuldade, estamos por aqui :)
Abraços e bons estudos!