Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Fernando Albuquerque

Erro ao colocar Background

Por , em Desenvolvimento frontend

Recommended Posts

Fernando Albuquerque    0

Fernando Albuquerque
Postado

Seguinte, estou criando um site e tudo mais, mas por algum motivo, não estou conseguindo colocar um background. O caminho da pasta está correto, o nome, o código, já revisei de cima à baixo e não acho o por quê de eu não estar conseguindo. Basicamente, mesmo eu colocando no CSS o background-image: url(img/back4.jpg); não acontece nada, o site permanece com a cor padrão. Alguém sabe resolver este problema?

HTML

<html>
<head>
<meta charset="UTF-8">
<title> Massacre de Realengo </title>
<link rel="stylesheet" type="text/css" href="CSS/layout.css">
</head>
<body>

<!--Banner-->
<div class="container">
<div class="BannerP">
<img src="IMG/banner.jpg" />
</div>

<!-- Menu -->
<div class="Menu">
<ul class="Menu-Top">
<li><a href="#"> INÍCIO </a></li>
<li><a href="Sobre.html"> SOBRE </a></li>
<li><a href="Fotos.html"> FOTOS </a></li>
<li><a href="Documentários.html"> DOCUMENTÁRIOS </a></li>
<li><a href="Curiosidades.html"> CURIOSIDADES </a></li>
<li><a href="Contato.html"> CONTATO </a></li>
</ul>
</div>

<!-- Main -->
<div class="Main">
<div class="Box-Left">
<img src="IMG/wellington.jpg" />
</div>
<div class="Box-Right">
<img src="IMG/welpistola.jpg" />
</div>
<div class="Box-text1">
<p> Texto Aqui </p>
<a href="#" id="Continue"> Continue lendo... </a>
</div>
<div class="Box-text2">
<p> Texto Aqui </p>
<a href="#" id="Continue"> Continue lendo... </a>
</div>
</div>

<!-- Rodapé -->
<div class="Footer">
<div class="Footer-Box">
<ul>
<li><h4> MENU </h4></li>
<li><a href="#"> INÍCIO </a></li>
<li><a href="#"> SOBRE </a></li>
<li><a href="#"> FOTOS </a></li>
<li><a href="#"> DOCUMENTÁRIOS </a></li>
<li><a href="#"> CURIOSIDADES </a></li>
<li><a href="#"> CONTATO </a></li>
</ul>
</div>
<div class="Footer-Box">
<ul>
<li><h4> SOBRE O SITE </h4></li>
<li><a href="#"> MEMBROS </a></li>
<li><a href="#"> FINALIDADE </a></li>
</ul>
</div>
<div class="Footer-Box">
<ul>
<li><h4> REDES SOCIAIS </h4></li>
<li><a href="#"> FACEBOOK </a></li>
<li><a href="#"> TWITTER </a></li>
</ul>

</div>
<div class="copyright">
Copyright © 2015 Massacre de Realengo. Todos os direitos reservados.
</div>
</div>


</div>



</body>
</html>

CSS (externo)

*{
margin: 0;
padding: 0;

}

body {
background-image: url(img/back4.jpg);
font-family: Verdana, Century, Arial;
font-size: 15px;
margin-left: 0px;
padding-top: 30px;
color: #000;
}

a {
text-decoration: none;
color: #000;
}

ul {
list-style: none;
margin-top: 0px;
padding-top: 8px;
padding-left: 0px;
}


/***-------------------------------------------------------------

Container do site

-------------------------------------------------------------***/
.container {
margin: auto;
width: 850px;
height: auto;
}


/***-------------------------------------------------------------

Banner do site

-------------------------------------------------------------***/

.Banner .BannerP img {

float: left;
width: 850px;
height: 180px;
margin-left: 335px;
}

/***-------------------------------------------------------------

menu do site

-------------------------------------------------------------***/
.menu {
background: #CCC;
width: 850px;
height: 35px;
margin: 70px 0px 0px 0px;
padding: 0px;
}

.menu li {
display: inline;
}

.menu-top li a {
width: 50px;
height: 15px;
padding: 8px 24px;
text-shadow: 0px 2px 3px #666;
margin-right: 12px;
}

.main {
width: 850px;
height: auto;
float: left;
margin: 15px 0 15px 0;
}

.main .box-left {
width: 350px;
height: 190px;
float: left;
background: #FFFFF0;
}

.main .box-right {
width: 350px;
height: 190px;
float: right;
margin-right: 15px;
background: #FFFFF0;

}

.main .box-right img {
width: 365px;
height: 325px;
}

.main .box-left img {
width: 365px;
height: 325px;
}

.main .box-text1 {
width: 335px;
height: 125px;
margin-top: 150px;
float: left;
background: #FFFFF0;
padding: 15px;
text-align: justify;
}

.main .box-text2 {
width: 335px;
height: 125px;
margin-top: 150px;
margin-right: 0px;
float: right;
background: #FFFFF0;
padding: 15px;
text-align: justify;
}


/***-------------------------------------------------------------

Rodapé do site

-------------------------------------------------------------***/
.Footer {
width: 850px;
height: 200px;
float: left;
background: #393939;
color: #FFFFE0;
margin-left: 0px;
margin-top: 0px;
}

.Footer-box {
width: 245px;
height: 180px;
float: left;

}

.Footer-box ul {
margin-left: 55px;
padding-left: 55px;
}

.Footer-box ul li {
color: #FFF;
}

.Footer-box ul li a {
color: #BBB;
}

.copyright {
margin-top: 180px;
margin-left: 148px;

}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jeovane Carvalho    6

Jeovane Carvalho
Postado

Use o caminho absoluto no css por exemplo você esta usando assim:

 

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

 

Use assim :

 

background-image: url(http://www.meusite.com.br/img/back4.jpg);

 

e no seu css insira também este : background-color:#999; ai você escolha a cor que quer de fundo caso seu background deixa de funcionar ou não carregue por algum outro motivo.Mas do jeito que te passei ira funcionar, testei aqui e deu certo.

 

 

OBS: Você usando o caminho absoluto nas imagens e links , não terá problemas futuros , caso queira usar urls amigáveis e tenha subdiretórios, eu tive este problema e tive que readaptar todos os meus projetos.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito