Oii gente, eu estou precisando muito de uma ajudinha aqui. Minha imagem do cabeçalho não aparece, não sei o que pode ser, porque não aprece nenhum erro no console, já verifiquei o caminho esta certo... Simplesmente não aparece agora . O que pode ser??? Por favor me ajudem, estou no aguardo!!
Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas
respostas
Imagem do cabeçalho não aparece!
Oi, Thallia, tudo bem?
Compartilha aqui o seu código para que possa ver e entender melhor o que aconteceu :}
Oiie obrigada por responder:)
.html
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1" >
</head>
<body>
<header>
<nav class="navbar navbar-default">
<section class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"href="#">TopCasaFina Arquitetura</a>
</div>
<div class="collapse navbar-collapse" id="collapse-navbar">
<ul class="nav navbar-nav">
<li><a href="#sobre-nos">Sobre Nós</a></li>
<li><a href="#nossos-projetos">Nossos Projetos</a></li>
<li><a href="#depoimentos">Depoimentos</a></li>
<li><a href="#video">Vídeo Institucional</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</div>
</section>
</nav>
<div class="topcasafina-banner">
<h1>TopCasaFina Arquitetura</h1>
<p>Projetando a casa dos sonhos desde 2000 A.C</p>
<a href="#contato" class="btn btn-primary btn-lg">Contate-nos agora</a>
</div>
</header>.css
html, body{
height: 100%;
}
header {
background-image:url(Área de Trabalho/TopCasaFina-Arquitetura/arquivos-curso/assets/img/castelo.jpg);
background-position: top center;
background-size: cover;
position:relative;
height: 100%;
}
.topcasafina-banner {
color:#FFF;
background:rgba(0, 0, 0, 0.4);
padding:1.5em;
width:80%;
border-radius:10px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
transition:transform 0.3s;
}
header h1 {
margin-top:0;
}
Ali eu coloquei todo o caminho para chegar a imagem, porque eu vi num outro comentário que a imagem só abria se colocava o caminho completo, mas mesmo assim a imagem não apreceu.
Tentou substituir o Área de trabalho por Desktop? Na propriedade background-image do header no seu CSS.
Sim, mas mesmo assim não apareceu a imagem:(
Então, eu fiz uns testes com outras imagens aqui e também não abre. Aparece o erro: index.html:289 GET file:///C:/Users/talia/Desktop/TopCasaFina-arquitetura/bootstrap/css/arquivos-curso/assets/img/depoimentos/depoimento1 net::ERR_FILE_NOT_FOUND que leva pra linha que foi colocado o jquery. Lembrando que eu testei outras imagens nesse lugar e também não apareceram. Será que alguém tem uma ideia do que pode estar acontecendo??
solução!
Talvez seja porque você esteja usando o path absoluto para acessar a sua pasta. Tenta chegar nela relativamente ao seu arquivo .css. Por exemplo, se sua estrutura de pastas for assim:
bootstrap
|-- css
|-- reset.css
|-- style.css
|-- img
|-- depoimentos
|-- depoimentos.jpg
|-- index.html
Supondo que você esteja usando o arquivo style.css para mudar o background-image, faça da seguinte forma:
`background-image: url(../img/depoimentos/depoimento1.jpg);
O "../" serve para voltar uma pasta então, supondo que você estivesse fazendo as alterações de estilo no arquivo style.css`` na pasta css, ao voltar uma pasta, você estaria na pasta bootstrap, e então é só seguir o fluxo normal: img/depoimentos/depoimento1.jpg.
Aliás, o caminho que eu dei como exemplo, é para o caso de você ter uma estrutura de pastas similar à estrutura supracitada, caso a sua estrutura seja diferente, adeque ao seu caso.
Oi, Thallia, tudo bem?
Com a ajuda do Dyeizon, conseguiu fazer aparecer as imagens?