Slider 100%

[Matheus Conti 0]

Olá amigos estou dev um site que a img ocupa 100% da resolucao fiz o seguinte em css

 

html, body{ overflow:hidden; background:#000; height:100%; }

#bg{width: 100%; height: 100%; position: absolute; top:0; left:0; z-index:0; opacity:.6;}



#container { width: 100%; height: 100%; overflow:auto; z-index:1; position:absolute;}

#principal{ width:950px; margin:0 auto; z-index:2;}

 

Em minhas imagem atribui a id = bg

 

funcionou fico 100% fixa nao importa a resolucao porem preciso usar um slider e quando eu coloco as img dentro do slider

 

<div id="slider">

<img src="fotos/foto2.jpg" id="bg" />

<img src="fotos/carro.jpg" id="bg" />

 

</div>

 

as imagens nao aparece fica apenas o body com background #000 ja tentei usar class="bg" nas img mas da na mesma coisa

 

estou usando o plugin jcycle

 

Algum me ajuda ? :unsure:

[JoseCarlosWeb 5]

no id #bg, atribui z-index:2;

[Matheus Conti 0]

Infelizmente nao funcionou ;/

[JoseCarlosWeb 5]

Poe ai, como você esta montando o slider com essas imagens. ai eu posso fazer um teste.

[Matheus Conti 0]

css

 

html, body{ overflow:hidden; background:#000; height:100%; }

 

#bg{width: 100%; height: 100%; position: absolute; top:0; left:0; z-index:0; opacity:.6;}

 

 

 

#container { width: 100%; height: 100%; overflow:auto; z-index:1; position:absolute;}

 

#principal{ width:950px; margin:0 auto; z-index:2;}

 

<script language="JavaScript" src="js/jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="js/jcycle.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
   $(function() {
       $('#slider').cycle({ fx: 'fade' });
   });
 </script>

<div id="slider">

<img src="fotos/foto2.jpg" id="bg" />

<img src="fotos/carro.jpg" id="bg" />

 

</div>

[JoseCarlosWeb 5]

Olha só, fiz e coloquei aqui:

http://cliquei9.com/help/teste.html

 

Dá só uma olhada nos fontes.

criei o #slider{ height:100%;} e pronto.

[Matheus Conti 0]

AGora funcionou porem ele fica na frente de tudo no site ;( ja mechi no z-index mas nao ta dando certo

[JoseCarlosWeb 5]

tá, mas veja que você definiu que a imagem é 100% em tudo, logo. para aparecer um conteudo por cima, você deve adicionar uma outra div com z-index:30; ou maior. Assim o conteudo vai aparecer por cima das imagens.

[Matheus Conti 0]

ja tentei ate com 9999 nao vai ;/

 

<div id="slider">

<img src="fotos/foto2.jpg" id="bg" />

<img src="fotos/carro.jpg" id="bg" />

 

</div>

 

<div id="container">

<div id="principal">

dsasasaddas

 

</div>

</div>

[JoseCarlosWeb 5]

tenta assim:

 

 

<div id="slider">
<img src="imagens/bg-slide-img.jpg" id="bg" />
<img src="imagens/bg-slide-img.jpg" id="bg" />


</div>
<div id="conteudo">aqui poe o conteudo</div>

 

#conteudo{ z-index:999; position:relative; z-index:50; top:-100%; }

[Matheus Conti 0]

Nossa muito obrigado mais pode me explicar porque acontece isso

?

[JoseCarlosWeb 5]

Você definiu que o slider preencheria toda a tela, então, você precisará de um objeto por cima do slider.

 

no css você ainda pode deixar dessa forma:

#conteudo{ z-index:999; position:absolute; z-index:50; top:0; }

 

ou seja, a div#conteudo estará por cima de todos os objetos.

[Matheus Conti 0]

Cara mt obrigado por esta ajudando porem ao fazer isso dependo da resolucao o item nao fica no mesmo lugar