Aller aux menus

#CSS {débutant;}

• Premiers pas
• CSS3
• Tutoriels
• Livre
• Boite à Outils

CSS 3 : Images multiples dans un même background

Dans le tutoriel, mentionné ci-dessus, expliquant comment placer une image aux quatre coins d'une page, la technique employée était une imbrication de div. Méthode qui fonctionne effectivement très bien, mais qui aboutit à une lourdeur de code qui peut vite tourner à l'indigestion.

Les CSS3 apportent une vraie simplification et une souplesse à toute épreuve avec les background multiples.

La syntaxe est de plus extrêmement simple : elle est identique au background de CSS 2.1, chaque nouveau fond devant être simplement séparé par une virgule.

Une image aux quatre coins d'une page

Ainsi, pour reproduire le même effet que ce rendu d'images multiples à l'aide de div, il suffira d'indiquer ceci :

Code CSS

#contenu {
background:url(images/houx2.gif) no-repeat left top, 
url(images/houx2.gif) no-repeat right top, 
url(images/houx2.gif) no-repeat left bottom, 
url(images/houx2.gif) no-repeat right bottom; 
}

Code (x)html

<div id="contenu">
 <h1>Les quatre coins</h1>
 <p> [bla bla]</p>
</div>

Voir le résultat

Aucune différence avec l'autre visuel, technique trois fois plus rapide à mettre en place et code trois fois moins lourd. C'est à s'en taper le cul par terre tellement c'est simple et efficace...

Haut