Ir para conteúdo

Arquivado

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

Apenas Eu

Coluna Falsa + Topo Transparente

Recommended Posts

Ola!

Então, eu utilizo o Columns Faux (Coluna Falsa) em meu site, porém decidi fazer um efeito no topo que requer uma imagem transparente. Semelhante ao http://www.f1.com

Conforme apresentado no exemplo, há uma imagem de fundo (creio que no body) e o topo um retangulo transparente.

Em meu site, eu fiz isso dessa maneira:

body {
color:#000;
background: url(imagens/fund3o.jpg) no-repeat #EAEAEA;
font-family:"Trebuchet MS", Tahoma, Arial, Verdana;
font-size:12px;
}
#todo {
	margin: auto;
	width: 772px;
	margin-top: 25px;
	background: url(imagens/faux-bg.gif) repeat 0 0;
}
#topo {
background: url(imagens/figura.png);
width: 773px; 
height: 150px; 
}
O Problema, é que o faux, aparece por de trás do retangulo semi-transparente do "topo". Para resolver a questão achei que poderia alterar a posição vertical do background, para ele "descer" um pouco. Só que eu altero o valor dele, mas de nada acontece. O Horizontal background funciona de boa.

 

Por isso, há algum jeito de manter o faux e o topo transparente, sem ter que alterar a estrutura do site?

Estrutura em questão

<div id="todo">
<div id="topo"></div>
...
</div>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Para facilitar o entendimento. eu vou enviar uma imagem do problema =D

Imagem Postada

 

 

Abaixo, a imagem da maneira que eu queria que ficasse, o topo. O detalhe é que este está SEM o faux.

Eu quero que fique o fundo do topo transparente mas COM o faux pra disfarçar as colunas!

 

Imagem Postada

 

Lembra que eu falei que a opção de posição do vertival background nao estava funcionando? Existe a possibilidade de este funcionar, mas não aparecer as alterações, desta opção no dream heaver?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Retire a opção do Faux Columns da div#todo e coloque em outra, abaixo da div#topo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Retire a opção do Faux Columns da div#todo e coloque em outra, abaixo da div#topo.

 

Brigado...eu tentei isso mas a estrutura que eu fiz nao permitiu isso =\

 

Sugestão: Altere a imagem de background do "topo" com este retângulo semi-transparente (sem o bg do faux claro e utilizando o fundo desejado neste).

Eu acho que entendi o que você disse....é trabalhoso isso....não fica 100% mas acho que é o jeito

Obrigado

 

Bom...se qualquer forma...se alguem tiver alguma outra solução para isso....tamo ae =)

 

Mas Porque o Position do Background vertical num funciona??? (o horizontal funciona)

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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