28172 sujets

CSS et mise en forme, CSS3

[Resolu] CSS3: background multi-images

Bonjour,

J'essaye de créer une boîte en CSS3 avec bords arrondis mais en utilisant des images, donc avec images multiples. La boîte est de largeur fixe mais de hauteur variable.
Pour cela j'utilise 3 images, une pour le haut de la boîte et une pour le bas (des PNG avec transparence), et une qui se répète en vertical pour le "corps".
Le problème que je rencontre est que cette dernière image apparaît en dessous des 2 autres et gâche donc complètement l'apparence.
Sur la capture d'écran ci-jointe, la première boîte est ce que j'obtiens avec mon CSS, la seconde est ce que je souhaite obtenir.

upload/32631-a.png

Le HTML:

<body id="test">
	<div id="container">
		<div id="content">
			<h1>Lorem ipsum</h1>
			<p>Lorem ipsum dolor sit amet (...)</p>
			<p>Quisque lectus enim (...)</p>
		</div>
	</div>
</body>


Le CSS:

body#test {
	background: #e6e6e6;
	color: #3f3f3f;
	font-family: "Arial", "Helvetica", sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: normal;
	width: 100%;
}

#container {
	width: 960px;
	margin: 0 auto;
	text-align: left;
}

#content {
	background:
		url(../img/content_header.png) top no-repeat,
		url(../img/content_footer.png) bottom no-repeat,
		url(../img/content.png) left repeat-y;

	margin: 16px 0;
	padding: 26px 16px 44px 16px;
}


J'ai suivi différents tutoriels trouvés sur le net, certains semblent assez proches de ce que je fais, mais je n'arrive toujours pas à comprendre pourquoi le "fond" déborde sous les images de haut et bas ! Smiley sweatdrop
Est-ce que quelqu'un aurait une explication ou une solution ?
Modifié par GoustiFruit (16 Sep 2010 - 15:53)
Bonjour,

GoustiFruit a écrit :
je n'arrive toujours pas à comprendre pourquoi le "fond" déborde sous les images de haut et bas ! Smiley sweatdrop

Parce que c'est censé marcher comme ça et donc que c'est normal?
Chaque background prend potentiellement toute la surface de l'élément, et les backgrounds ne se repoussent pas entre eux (ce qui serait pour le moins étrange). Si tu utilises trois images de fond, c'est comme si tu avais trois DIV imbriqués et que tu plaçais une image de fond unique sur chaque.

Deux solutions qui me viennent à l'esprit:
- utiliser des images opaques, ce qui est tout à fait possible si tu as une couleur de fond unie derrière ton conteneur;
- utiliser border-image (voir la spec) plutôt que les background multiples.

En passant, dans un cas comme dans l'autre tu pourras optimiser tes images en utilisant PNG-8 plutôt que du PNG-32 sans doute trop lourd.
- PNG-8 opaque pour la première solution;
- PNG-8 avec transparence alpha (peut être créé avec Fireworks ou ImageAlpha) pour la deuxième solution.
Modifié par Florent V. (16 Sep 2010 - 14:04)
- Je vais réessayer avec border-image mais c'est un peu plus compliqué à comprendre Smiley confused .
- Les images opaques je préfère éviter parce que la couleur de fond peut encore changer et je n'ai pas envie de retoucher toutes mes images si ça arrive !
- en PNG-8 mes images rendent très mal, à cause des dégradés très légers et de l'ombre "subtile". Quant au poids, les 3 images en PNG-32 utilisées dans ce code totalisent 5 Ko (1+1+3 de haut en bas) donc ça reste raisonnable ?

Ok, résolu avec border-image. Merci !
Modifié par GoustiFruit (16 Sep 2010 - 15:53)
GoustiFruit a écrit :
en PNG-8 mes images rendent très mal, à cause des dégradés très légers et de l'ombre "subtile"

Tu dois mal te démerder dans tes réglages, pour cette image ya pas de raison que ça passe mal.

GoustiFruit a écrit :
Quant au poids, les 3 images en PNG-32 utilisées dans ce code totalisent 5 Ko (1+1+3 de haut en bas) donc ça reste raisonnable ?

Oui, c'est pas mal. Par contre il ne faut pas laisser les trois images séparées, mais faire une image unique pour les trois (technique des sprites CSS) pour gagner deux requêtes HTTP.
Florent V. a écrit :

Par contre il ne faut pas laisser les trois images séparées, mais faire une image unique pour les trois (technique des sprites CSS) pour gagner deux requêtes HTTP.

Certes ça fait 2 accès de moins, mais ça complique bien l'écriture du code !
M'enfin, puisque je passe maintenant par la propriété border-image, je suis bien obligé de n'utiliser qu'un seul fichier image ! Et en fait ce n'était pas si dur que ça à faire.
Le seul (gros) inconvénient c'est qu'en jouant avec cette propriété on joue aussi sur les dimensions de la boîte, il faut donc refaire des calculs pour savoir quelles nouvelles valeurs donner au "contenu"...
Modifié par GoustiFruit (17 Sep 2010 - 09:30)
GoustiFruit a écrit :
Certes ça fait 2 accès de moins, mais ça complique bien l'écriture du code !

Pas tant que ça une fois qu'on a un tout petit peu de pratique de cette méthode.

C'est assez simple à gérer si tu te contentes de grouper les images qui vont ensemble, par exemple tes trois images pour décorer ta boite.
Si par contre tu essayes de faire un fichier de sprites unique:
- tu gagnes encore plus sur les requêtes HTTP (bien);
- tu gagnes beaucoup en complexité pour la construction de ton image et le code CSS (mal);
- la maintenance et les modifications deviennent pas mal compliquées aussi (mal);
- tu es presque sûr de te retrouver avec des sprites pas accessibles (mal);
- tu as moins de marge de manoeuvre pour l'optimisation du nombre de couleurs, et tu risques des dégradations franches sur certaines images (mal).

Donc je ne recommande pas forcément les sprites massives. Mais la technique reste intéressante lorsqu'elle est utilisée raisonnablement.

GoustiFruit a écrit :
Le seul (gros) inconvénient c'est qu'en jouant avec cette propriété on joue aussi sur les dimensions de la boîte, il faut donc refaire des calculs pour savoir quelles nouvelles valeurs donner au "contenu"...

Tu as pensé à utiliser box-sizing:border-box?
Sujet clos
Aller à