Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal do Imasters! Bem, sou iniciante no css, e estou com o seguinte problema: Estou fazendo um site, porém, coloquei o background, mas... quando eu aperto F12 no dreamweaver cs3, ele não aparece, mas sim, aparece no dreamweaver, vou colocar o código fonte:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nome - Produções e Eventos</title>
<link href="luna.css" rel="stylesheet" type="text/css" />
</head>
<body>Nome do site
</body>
</html>CSS:
body {
background: #000000 image url(lunafundo.jpg)
}
E pra mim colocar uma image dentro de uma div? por exemplo: criei um topo pelo div, e fiz a imagem e quero colocar dentro do topo, como é possivel ?
Depende do propósito da imagem.
Pode inserir por css no caso de imagens decorativas do tipo utilizadas em menus e itens de lista, barras separadoras ou mesmo as do tipo que se encontra no topo esquerdo desta página, "coloca-se a imagem em background":
background-image: url(caminho/imagem.gif);
ou com a tag IMG para imagens que não são meramente decorativas:
<div>
<img src="caminho/imagem.gif" alt=" " title=" " />
</div>Não aparece a imagem inserindo por CSS. Agora, com a tag IMG, é possivel inserir, porem, não tem como eu colocar nada em cima da imagem, posisiona-la e afin's.
Se a imagem inserida por CSS não está aparecendo deve ser porque seu “caminho” está incorreto, verifique e tente novamente.
Exemplo css interno:
background-image: url(imagens/fotos/imagem.gif);
Exemplo css externo:
background-image: url(../imagens/fotos/imagem.gif);
Sobre a tag IMG, basta trabalhar ela com css também.
Ex:
CSS
img {margin-top:10px;}
XHTML
<img src="caminho/imagem.gif" alt=" " title=" " />
Desculpe a minha ignorancia. Mas... com CSS/XHTML, eu não consigui agora... com o CSS,tbm não, e a imagem está certinho, segue o código fonte:
#topo {
height:20px;
background-image: url(topo.jpg)
border-top:1px #4A4A4A;
border-bottom:1px dotted #4A4A4A;
color:#999999;
text-align:center;
}O caminho está correto "url(topo.jpg)"? Se estiver declare uma largura.
width:XXpx;
Dica: Quando for colocar um código, coloque dentro de
; )
Bem, eu declarei a largura e nada! E o caminho está devidamente correto.
Posta seu código completo.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<style type="text/css">body {
background: url(lunafundo.jpg)
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nome - Produções e Eventos</title>
<link href="luna.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="topo">
</div>
<hr />
<div id="menu">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li><a href="">HOME</a></li>
<li><a href="">PRODUÇÕES E EVENTOS</a></li>
<li><a href="">CADASTRE-SE</a></li>
<li><a href="">FAÇA SUA FESTA</a></li>
<li><a href="">NOTÍCIAS</a></li>
<li><a href="">EVENTOS</a></li>
<li><a href="">SERVIÇOS</a></li>
<li><a href="">CONTATO</a></li>
</ul>
</div>
<p> </p>
</body>
</html>CSS:
* {
padding: 10;
margin: 0;
}
#topo {
height:20px;
background-image: url(topo.jpg)
width:300px;
border-top:2px #4A4A4A;
border-bottom:2px dotted #4A4A4A;
color:#999999;
}#menu li a {
display: block;
width: 200px;
color: #CCCCCC;
height: 18px;
line-height: 20px;
padding:16px;
text-decoration: none;
font: 16px Rockwell, tahoma, Geneva, sans-serif;
font-weight: normal;
font-variant: normal;
}Ops, nem tinha visto... rs
Tem que fechar o css com ";"
background-image: url(topo.jpg);
e no body se for colocar mais propriedades também.
Rafael, vlw cara.. consigui... mais uma coisa, como faço para a imagem ficar no meio da tela? e pra ela não ficar repetindo, ficar apenas no meio da tela?
"margin:0 auto;" Centraliza na horizontal.
* {
padding: 10;
margin: 0 auto;
}Não repete a imagem.
background-repeat:no-repeat;Leia mais em: http://www.w3schools.com/css/pr_background-repeat.asp
[]'s
Obrigado Rafael! A fonte do menu não está alterando, pq ?
É por causa da fonte "Rockwell", prefira usar uma fonte nativa do SO, como Arial, Times New Roman e etc.
Obrigado pela ajuda! Um grande abraço!
De nada ; )
Abraços []'s
Este "image" dentro do background é incorreto.
Experimente assim:
body {