Estou criando um site que é branco, então nãoter qualquer plano de fundo atribuído. Mas quero adicionar alguns detalhes de gradiente azul em duas partes do site. #bg_top seria colocado na parte superior à esquerda e #bg_bottom deveria ser colocado na parte inferior à direita. Claro que isso não está funcionando exatamente do jeito que eu quero ...
É assim que é exibido no meu html:
<body>
<div id="bg_top"></div>
<div id="wrapper">
</div>
<div id="bg_bottom">
</div>
<footer>
</footer>
O #bg_top funciona perfeitamente.Ele se exibe atrás do invólucro, mas o bg_bottom está me dando o problema por estar bem colocado, mas está visualmente entre o invólucro e o rodapé. Portanto, usei o z-index, mas também não está funcionando. Além disso, o estranho é que os parâmetros inferior e esquerdo não fazem nenhuma diferença. Este é o código CSS:
#wrapper{
width: 925px;
height: 1355px;
margin-left: auto;
margin-right: auto;
position: relative;
}
#bg_top{
width: 500px;
height: 500px;
position: absolute;
top: 0px;
left: 0px;
background-image: url("../_img/2_body/bg/bg_top.jpg");
z-index: -1;
}
#bg_bottom{
width: 500px;
height: 500px;
position: relative;
float: right;
bottom: 0px;
right: 0px;
background-image: url("../_img/2_body/bg/bg_under.jpg");
z-index: -1;
}
Alguém poderia me ajudar? Já tentei de tudo ...
obrigado
Respostas:
0 para resposta № 1O problema é que você não está envolvendo o bg_top e o bg_bottom dentro do invólucro. Funciona perfeitamente quando você faz isso. Por favor, encontre o violino que usei
http://jsfiddle.net/meetravi/sL5jm/
Boa sorte !
0 para resposta № 2
Com a posição: relativa, se você quiser visualmente dentro do invólucro, você precisa colocar o HTML dentro do invólucro.
0 para resposta № 3
Já tenho a minha resposta ...Eu precisava que as fotos estivessem atrás da embalagem. A imagem inferior colou na parte superior direita do rodapé e a imagem superior no mesmo nível do cabeçalho. Graças às informações, vi que era muito simples ...
<body>
<header>
<div id="bg_top"></div>
</header>
<div id="wrapper"></div>
<footer>
<div id="bg_bottom"></div>
</footer>
</body>
Então, depois apliquei a posição absoluta e um índice z e a imagem como o fundo feito ... atrás do invólucro e em seu lugar. Este foi o código CSS final:
#bg_top{
width: 500px;
height: 500px;
position: absolute;
top: 0px;
left: 0px;
background-image: url("../_img/2_body/bg/bg_top.jpg");
z-index: -1;
}
#bg_bottom{
width: 500px;
height: 500px;
position: absolute;
background-image: url("../_img/2_body/bg/bg_under.jpg");
bottom: 155px;
Qualquer outra dúvida talvez eu possa ajudar ... direita: 0px; índice z: -1; }