Já tentei de tudo e não funciona! tem algo errado com o meu código?
body{ background-image: url(/img/black_brick_grunge.jpg); }
6
respostas
respostas
Não consigo subir a imagem de fundo para o body!!
Boa noite, Douglas! Como vai?
Verifique se o caminho e nome da imagem estão corretos. A imagem está realmente numa pasta chamada img e esta pasta está na mesma pasta do arquivo HTML?
Outra coisa, idealmente o caminho da imagem deve ser colocado entre aspas simples ou duplas. Embora esse não seja o problema.
Qualquer coisa é só falar!
Grande abraço e bons estudos, meu aluno!
Sim, está tudo certinho. Ela até carrega pelo vscode mas qdo abro direto pelo Chrome não abr3.
Experimente colocar assim ./img/black_brick_grunge.jpg e veja se funciona.
Oi Gabriel, tudo bem?
Infelizmente não deu certo. Ele abre pelo plugin do VS Code normal. Porém, qdo tento abrir direto do browser, seja ele qual for, não aparece a imagem de fundo. Fiz um teste com outra imagem e funcionou. A imagem q deu certo foi uma imagem q baixei do google. As imagens q eu crio no photoshop não dão certo, acabei de testar. e olha q estão pequenas... Tem algum padrão para imagens de fundo? Tipo tamanho máximo, tipo de arquivo?
Opa, Douglas! Como vai?
Vc poderia compartilhar um projeto de exemplo no github e mandar o link aqui? Assim poderei dar uma olhada no qu está acontecendo. Sobre as restrições que vc perguntou, nunca vi nada desse tipo.
Oi Gabriel, tudo bem? Desculpe a demora. Vms retomar?Olha só, no site q fiz do curso barbearia alura também acontece a mesma coisa com o "bg do rodapé". Vou colocar o código inteiro aqui mesmo p vc ver. Também pq ainda não manjo do github rsrsrs
Obrigado
HTML PRODUTOS
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Produtos - Barbearia Alura</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="caixa">
<h1><img src="img/logo.png"></h1>
<nav>
<ul class>
<li><a href="index.html">Início</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">
<p class="produto-descricao">Na tesoura ou máquina, como <br>o cliente preferir</p>
<p class="produto-preco">R$ 25,00</p>
</li>
<li>
<h2>Barba</h2>
<img src="img/barba.jpg">
<p class="produto-descricao">Corte e desenho profissional <br>de barba</p>
<p class="produto-preco">R$ 18,00</p>
</li>
<li>
<h2>Cabelo + Barba</h2>
<img src="img/cabelo+barba.jpg">
<p class="produto-descricao">Pacote completo de cabelo<br> 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 Alura - 2019</p>
</footer>
</body>
</html>
CSS STYLE
header {
background: #bbbbbb;
padding: 20px 0;
}
.caixa {
width: 940px;
position: relative;
margin: 0 auto;
}
nav {
position: absolute;
top: 110px;
right: 20px;
}
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;
transition: 0.3s;
}
nav a:hover {
box-shadow: 0 0 20px #4bffe7;
background-color: #4bffe762;
transition: 0.3s;
color: #ffffff;
}
.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 20px 30px 40px;
transition: 0.2s;
}
.produtos li:hover {
border: 2px dashed #4bffe7;
border-radius: 10px 20px 30px 40px;
transition: 0.2s;
}
.produtos li:hover h2 {
font-size: 37px;
transition: 0.2s;
color: #00ffea;
}
.produtos li:active {
border: 2px dashed #bafd00;
border-radius: 10px 20px 30px 40px;
}
.produtos h2 {
font-size: 30px;
font-weight: bold;
}
.produto-descricao {
font-size: 18px;
}
.produto-preco {
font-size: 22px;
font-weight: bold;
margin: 10px 0 0;
}
footer{
background-image: url('img/bg.jpg');
padding: 40px 0;
}
.copyright{
color: white;
font-size: 14px;
margin: 20px 0;
}