28172 sujets

CSS et mise en forme, CSS3

2 images de fond collées aux extremités sans se chevaucher

Bonjour,

Je sèche un peu sur ce coup-là bien que je n'en sois pas à mon coup d'essai en CSS:
J'ai deux bandeaux d'images qui doivent rester en arrière plan (background-image).
L'un d'entre-eux doit rester en haut de la page tandis que l'autre doit être en bas de la page (quelle que soit la taille de la page).

l'image de fond en haut ne pose pas de problème, c'est un classique.
En ce qui concerne l'image de fond en bas, c'est plus coton car elle a tendance, quand on rend la fenêtre du browser plus petite, à se placer derrière/devant l'image supérieure.

Mon dilem est le suivant: Si je mets les bandeaux images en absolute, ils passeront l'un au dessus de l'autre quand je rendrai la fenêtre plus petite, ce que je ne veux absolument pas.
Si je mets, par contre, les bandeaux en relative, ils ne se chevauchent jamais mais restent désespérément collés l'un en dessous de l'autre, quelle que soit la taille du contenu.

Voici un schéma pour illustrer le problème et ce que j'aimerais obtenir.
A et B = images d'arrière plan
C=contenu qui doit être au premier plan et que l'image B doit suivre.
(Agrandir l'image pour tout voir)

upload/1005-quest.gif

Quelqu'un pourrait-il m'éclairer?
Est-ce possible sans passer par javascript (ce serait dommage et d'ailleurs ça pose d'autres problèmes)?

Merci!

PS: Attention, ces deux bandeaux d'images ne sont pas un footer et un header, ce serait trop simple!
En effet:
1) le contenu chevauche largement ces deux bandeaux.
2) Ces bandeaux, contrairement au contenu (qui aura une largeur de 950px et sera centré), ont une largeur de 100%.

C'est pour ça que je sèche...
Modifié par lexgotham (07 May 2010 - 13:24)
Bonjour lexgotham,

Alors ma solution serait, (dans le cas où j'ai bien compris ce que tu voulais ! lol)

Ma solution serait :


<div id="top">

      bla bla bla

     <div id="bottom">

     </div>
</div>


sur la div #top : background (l'image du haut) en position top left

sur la div #bottom : background (l'image du bas) en position bottom left

et la div #bottom en position absolute bottom: 0 par rapport à la div #top en position relative!


Voilà j'espère que c'est ce que tu voulais et que ça fonctionne (j'ai pas testé, n'étant pas sûr que c'est ce que tu voulais)...
Modifié par Zulie494 (07 May 2010 - 15:12)
Merci Zulie494!

C'est vrai que c'est pas évident de comprendre.
Tout d'abord parce que c'est tordu et ensuite parce que je ne suis pas très bon pour expliquer mes problèmes (que j'ai parfois du mal à cerner moi-même).
Heureusement que le schéma est là pour sauver la mise Smiley cligne

Ta proposition ne fonctionne malheureusement pas car elle ne tient pas compte de la div contenu (le bloc vert dans le schéma) alors que l'image en bottom est sensée la suivre de très près.

Cela dit, cela m'a bien aidé à trouver une parade car l'idée est bonne Smiley biggrin :

En faisant ceci:


<body>
	<div id="content"> 
		<div id="background_foot"></div>
	</div>
</body>


Et en lui associant cela:


html,body
{
height:100%;
}

body 
{
margin:0px;
padding:0px;
background-image: url(imgA);
background-position: top center;
background-repeat: no-repeat;
}

#content
{	
position:relative;
width:948px;
margin:0 auto;
border:1px solid grey;
margin-top:45px;
z-index:2;
}

#background_foot
{	
position:absolute;
width:100%;
background-image: url(imgB);
height:353px;
bottom:-124px;
left:-576px;
z-index:1;
}


J'arrive quasi à ce que je veux dans la mesure où je force l'image du dessous à suivre le "cul" de la div "content". C'est un grand pas.
Mon seul dernier soucis est que, malgré les z-index, l'image d'en bas se place devant la div content et non pas en arrière plan...

Une idée?

Merci!
Modifié par lexgotham (07 May 2010 - 20:03)
Salut,

Vu que tu connais la hauteur de tes deux images, pourquoi ne pas donner une hauteur minimum à ton contenu correspondant à la hauteur cumulée de tes deux images, cela devrait fonctionner je pense. Smiley smile
Sujet clos
Aller à