Discussion :

[Bovino]

Aujourd'hui, Pascale Lambert ne nous propose pas un tutoriel mais plus une astuce. En effet, à l'aide d'un court exemple, elle nous donne une méthode pour ajouter plusieurs images de fond à un document HTML.

N'hésitez pas à faire part de vos remarques, questions et encouragements à la suite de ce message.

Voir aussi les cours et tutoriels CSS.

Merci à elle

[adiGuba]

Salut,


A noter que les CSS3 autorisent l'utilisation de multiple-background sur un même élément : http://www.w3.org/TR/css3-background/#layering

Du coup il n'y a plus besoin de multiplier les div :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#contenu {
	background-image: url(houx2.gif), url(houx2.gif), url(houx2.gif), url(houx2.gif);
	background-position: top left, top right, bottom left, bottom right;
	background-repeat: no-repeat;
 
	padding-left: 100px;
	padding-right: 100px;
}

Par contre cela ne fonctionne pas sur tous les navigateurs...

a++

[Kerod]

Et surtout ce n'est pas prêt d'arriver vu que le CSS3 est toujours à l'état d'écriture.

Donc pour avoir quelque chose de compatible avec tous les navigateurs du moment, il vaut mieux utiliser la méthode décrite par Pascale.

[adiGuba]

Oui je n'ai jamais dit le contraire. Mais c'est quand même implémenté dans les dernières versions des navigateurs modernes. Seul IE est à la traine...

Il me semble que c'est prévu dans IE9...


a++

[Kerod]

Il n'y a pas de soucis. C'est une solution alternative pour ceux qui souhaitent ne pas faire ce genre de choses. Le seul problème c'est que ce n'est pas compatible tout navigateur (il doit avoir que les dernières version de Opera, Firefox et Safari qui l'implémente).

Après il y a aussi les solutions avec JavaScript mais c'est lourd et surtout s'il y a une désactivation du JavaScrip ça ne fonctionne plus.

C'est ça le problème des versions navigateurs, ils devraient forcer leur suppression des postes (je parle des constructeurs ^^).

[Vincent BONNAL]

Bonjour,
J'ai une petite question, pour ma culture perso... pourquoi imbriquer les div?

Vincent.

[Macmillenium]

J'ai une petite question, pour ma culture perso... pourquoi imbriquer les div?

As-tu au moins lu l'astuce?

On va définir quatre cadres imbriqués (hg, hd, bg, bd), puis leur attribuer un background-position adéquat pour que les images se placent aux quatre coins. Les marges définies dans le cadre contenu sont précisées en fonction de la taille de l'image pour ne pas que le texte empiète dessus.

[Vincent BONNAL]

As-tu au moins lu l'astuce?

Oui.
"On va définir quatre cadres imbriqués" est une affirmation. Pourquoi les imbriquer? Étant débutant en CSS, ce genre de subtilité a tendance à n'embrouiller, d'où mon interrogation sous entendue à cette question:est-ce utile d'imbriquer ces div (comme ça alourdi le code HTML, il doit bien y avoir une raison à cela, d'où ma question)

Vincent

[adiGuba]

Avec les CSS2 tu ne peux définir qu'une seule et unique image par éléments.
Donc si tu veux "simuler" l'affichage de plusieurs images sur un seul élément, il faut en fait imbriquer plusieurs éléments et appliquer une image sur chacun...


Les CSS2 ont aboutit à plein de lourdeur comme ceci, qui implique de "bidouiller" le HTML pour obtenir certains rendus ou effets...


Les CSS3 vont grandement améliorer cela (multiple-backgrounds, border-image, border-radius, ombrages, couleurs alpha, dégradées, ...) mais comme indiqué cela pose le problème de la compatibilité...


a++

[Vincent BONNAL]

Bon... d'accord.
Je vais faire des essais pour (encore) mieux comprendre. Merci pour ta réponse.

Vincent.

[Erwan31]

Et surtout ce n'est pas prêt d'arriver vu que le CSS3 est toujours à l'état d'écriture.

Salut Kerod
en fait pas tout à fait > http://www.w3.org/Style/CSS/current-work#background
Le module comprenant les background est en CR et donc implémentable depuis décembre. C'est un des avantages de la division de CSS3 en plusieurs modules.

Si la totalité des background n'est pas nécessaire pour l'accessibilité de la page,
on peut toujours passer par JS (si ça ne nuit pas de manière importantes aus perf d'affichages).

[adiGuba]

Il reste quand même le problème des navigateurs : il faudra attendre au moins IE9 pour voir cela se généraliser un peu...


a++

[Kerod]

Sans compté les réticents qui ne veulent pas changer de navigateur. IE6 est toujours présent dans les administrations

[adiGuba]

Pour les utilisateurs sous IE6, je pense qu'il n'est pas déraisonnable de leurs proposer une version "dégradée" du moment qu'elle reste lisible...

a++

[linfo78]

Bonjour,

j'ai reproduit strictement ce tuto, très bien expliqué et je vous livre mon problème :

si le texte inséré dans "contenu" n'est pas aussi haut que la hauteur de 2 images de côté, les 2 images se chevauchent.

Quelle serait la meilleure solution pour pouvoir afficher les images aux 4 coins, quelle que soit la hauteur du "contenu" ET quelle que soit la résolution de l'écran ?

Serait-ce de déclarer la hauteur du "contenu" ? mais si la hauteur de résolution passe de 800 à 1280 ?
Merci.

[dragonno]

Modifié

Mon doctype est celui par défaut du navigateur.

EDIT :

L'astuce de pascale fonctionne bien mais il ne faut pas confondre le div contenu avec le div d'encadrement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="cadre">
<div id="hg">
	<div id="hd">
		<div id="bg">
   			<div id="bd">
                              <div id="contenu">blablabla</div>
			</div>
		</div>
	</div>
</div>
</div>

[dragonno]

Une image plus parlante, le div "contenu" encadre le texte et le bouton.
Le Div cadre encadre tout.

http://yfrog.com/nccadrep

Ne faites pas attention au fautes, c'est un exemple rapide qui se passe das subtilités CSS pour les caractères accentués, les apostrophes et Cie