28172 sujets

CSS et mise en forme, CSS3

Trois divs pour un unique fond

Bonjour,

J'aimerai réalisé pour mon site un fond un peu particulier.
La couleur de fond sera bleue. Tout en bas de la page, il y aura un dégradé qui ira du bleu clair au transparent de bas en haut. Ajouté à ça deux silhouettes, l'une collée en bas à gauche de la page, et l'autre collée en bas à droite. Le tout agissant comme une image en background par dessus laquelle on pourrait superposer du texte ou des divs.

Mais quand je fais ceci, j'ai quelque soit la méthode un problème :
1) Si je ne fais qu'une simple image contenant les deux silhouettes ainsi que le dégradé, tout fonctionne, mais cette méthode me force à fixer la largeur de mon site à une valeur prédéfinie.
2) Si je positionne les silhouettes grâce à l'attribut position: relative; tout en bas de la page, ça fonctionne aussi, mais je perd le caractères "background", avec lequel on peut superposer du texte, ou même des divs.

Si vous avez une idée, je suis preneur :s

Image désirée réalisée sous photoshop :
upload/7233-screen.jpg
Modifié par Slagt (06 Feb 2009 - 14:34)
Salut Slagt,

Est-ce que tu as pensé à jouer avec la propriété z-index pour tes images de fond ? (genre z-index:-1) Smiley cligne (Tu les places en relative ? tien, moi j'aurai tenté en absolute....)
Modifié par Mikerob (06 Feb 2009 - 15:01)
Bonjour,

Après avoir écrit mon message j'ai eu une idée simple : mettre le site dans un div contenant la silhouettes de droite, lui-même contenu dans un div contenant la silhouette de gauche, lui-même contenu dans le body contenant le dégradé.

Ca marche parfaitement, sauf un petit soucis :s
Il y a une petite bordure tout en bas du site (comme s'il y avait un margin), SAUF si je mets une border...

Fichier HTML :
<body>
		<div id="chateau">
			<div id="chateau_eau">
				<p>Test</p>
				<p>Test</p>
				<p>Test</p>
				<p>Test</p>
				<p>Test</p>
				<p>Test</p>
				<p>Test</p>
				<p>Test</p>
			</div>
		</div>
	</body>


Fichier CSS :
body {
	margin: 0;
	padding: 0;
	
	background: #007EC6 url('../images/structure/fond/fond.png') repeat-x bottom;
}

#chateau {
	margin: 0;
	padding: 0;
	
	background-image: url('../images/structure/fond/chateau.png');
	background-position: left bottom;
	background-repeat: no-repeat;
}

#chateau_eau {
	margin: 0;
	padding: 0;
	
	background-image: url('../images/structure/fond/chateau_eau.png');
	background-position: right bottom;
	background-repeat: no-repeat;
}


J'obtiens ceci :
upload/7233-01.jpg

Et si je rajoute "border: 1px solid #F00;" dans #chateau_eau, j'obtiens ceci :
upload/7233-02.jpg

Je ne comprend pas bien pourquoi je dois mettre une bordure pour résoudre mon nouveau problème :s

EDIT : désolé Mikerob, on a répondu en même temps :s
J'ai utilisé la position relative, car en absolute je ne peux pas atteindre le bas de la page, mais uniquement le bas de la fenêtre. Ce qui fait que si la page contient beaucoup de texte par exemple, celle-ci sera plus grande que la fenêtre et je ne pourrai pas placé mes silhouettes en pied de page (l'effet est garanti jusqu'à ce qu'on se serve de l'ascenseur Smiley cligne )
Modifié par Slagt (06 Feb 2009 - 15:13)
Un petit up, au cas où quelqu'un aurait la réponse et n'aurait pas vu mon message (qui ne correspond plus tout à fait au titre par ailleurs...)
Sujet clos
Aller à