2 replies to this topic

[fernando_vasconcelos]

Olá pessoal!
blz?
Não sei se esse é o lugar certo, pois sou novíssimo aqui.

Seguinte, estou com um problema aqui e gostaria que vocês me ajudassem a resolvê-lo.

Bom, estou criando um site, e coloquei a largura do topo em 100% para pegar a tela toda .. até ai tudo bem

Mas quando eu coloco a imagem do topo também em 100% de largura ela duplica ..

como resolver?? alguém sabe??

* { margin:0px; padding:0px;}

#topo {margin: 0 auto; 
width: 100%; 
height: 130px; 1px solid; 
margin-top: 5px; 
background-image:url(../img/img_topo.jpg); 
background-repeat:repeat-x; }

#img_topo{ width:300px; 
height:100px; 1px solid; 
margin:10px 0px 0px 10px; 
text-align:center; 
background-image:url(../img/img_logo.png); 
position:absolute; }

Desde já agradeço!!

[Kahor]

Voce usou repeat-x e a imagem vai se repetir.

Mude para no-repeat

E uma dica, em vez de colocar:

background-image:url(../img/img_topo.jpg); 
background-repeat:repeat-x;

Coloque:

background: #FFF url(../img/img_topo.jpg) no-repeat;

Ela ja atribui cor, a url e o repeat

[André Manoel]

Voce usou repeat-x e a imagem vai se repetir.

Mude para no-repeat

E uma dica, em vez de colocar:

background-image:url(../img/img_topo.jpg); 
background-repeat:repeat-x;

Coloque:

background: #FFF url(../img/img_topo.jpg) no-repeat;

Ela ja atribui cor, a url e o repeat

Só acrescentando mais uma dica.

Você pode criar uma imagem grande... e utilizar a propriedade scroll para a imagem se adaptar a tela... faça um teste... se a resolução da tela é 1024 X 768 faça uma imagem com o tamanho 1280 X 200 e aplique essa propriedade...

background: #FFF url(../img/img_topo.jpg) no-repeat scroll;