Aide à la programmation, réponses aux questions / Html / div avec une image derrière le wrapper ne fonctionne pas - html, css

div avec une image derrière le wrapper ne fonctionne pas - html, css

Je crée un site Web qui est blanc, donc je neavoir des antécédents assignés. Mais je veux ajouter quelques détails de dégradé bleu sur deux parties du site Web. #bg_top serait placé en haut à gauche et #bg_bottom en bas à droite. Bien sûr, cela ne fonctionne pas exactement comme je le souhaite ...

Voici comment il s'affiche sur mon html:

<body>

<div id="bg_top"></div>

<div id="wrapper">
</div>

<div id="bg_bottom">
</div>

<footer>
</footer>

Le #bg_top fonctionne parfaitement. Il s'affiche derrière le wrapper mais le bg_bottom me pose le problème car il est bien placé, mais visuellement entre le wrapper et le pied de page. Par conséquent, j'ai utilisé z-index mais cela ne fonctionne pas non plus. De plus, ce qui est étrange, c'est que les paramètres bas et gauche ne font aucune différence. Voici le code 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;
}

Quelqu'un pourrait-il m'aider? J'ai tout essayé ...

Je vous remercie

Réponses:

0 pour la réponse № 1

Le problème est que vous n'emballez pas bg_top et bg_bottom dans le wrapper. Cela fonctionne parfaitement quand vous le faites.Veuillez trouver le violon que j'ai utilisé

http://jsfiddle.net/meetravi/sL5jm/

Bonne chance !

0 pour la réponse № 2

Avec position: relative, si vous le souhaitez visuellement à l'intérieur du wrapper, vous devez mettre le HTML dans le wrapper.

0 pour la réponse № 3

J'ai déjà eu ma réponse ... J'avais besoin que les images soient derrière l'emballage. L'image du bas collait à la partie supérieure droite du pied de page et l'image du haut au même niveau que l'en-tête. Grâce à l'entrée, j'ai vu que c'était très simple ...

 <body>

<header>

<div id="bg_top"></div>

</header>


<div id="wrapper"></div>


<footer>
<div id="bg_bottom"></div>
</footer>

</body>

Donc, après avoir appliqué la position absolue et un z-index et une image comme arrière-plan fait ... derrière l'emballage et à sa place. C'était le code 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;

Tout autre doute, je peux peut-être vous aider ... droite: 0px; indice z: -1; }