Feuilles de style : arrière-plans

Noter ce cours :

Liens sponsorisés :

Introduction

Nous avons vu dans les précédents chapitres comment insérer une feuille de style et comment mettre en forme du texte. Fort heureusement, les capacités des feuilles de styles CSS ne s'arrêtent pas là ! Vous allez pouvoir grâce à ce tutoriel apprendre et comprendre comment font les webmasters pour avoir de jolis arrière-plans colorés et/ou imagés Nous verrons également comment appliquer de jolies bordures à vos titres, à vos images ou encore à n'importe quoi ! et nous étudierons aussi les différents effets qu'il est possible de faire sur les images (transparence et zoom entre-autres). ASSAUT

Les arrière-plans

Avant d'évoquer les couleurs et images d'arrière-plan, il est bon de définir ce qu'est un arrière-plan. En CSS, chacune des balises XHTML (à l'exception de certaines balises particulières non visibles) peut être définie comme un bloc (boîte). Ces blocs forment des conteneurs qui, même si vous ne le voyez pas forcément, ont des limites bien précises. Pour que vous y voyiez plus clair, je vais vous montrer un exemple de code XHTML avec les blocs associés (tout le cours sur les blocs fera l'objet d'un autre chapitre, mais je vous apprends les rudiments pour que vous ne soyiez pas perdu(e) ) :

<p>Ceci est un <strong>premier</strong> bloc.</p>

Balises inline

Il va être possible d'attribuer un arrière-plan aux blocs que vous voyez ici. Pour plus de détails sur les conteneurs de type block et inline, je vous invite à lire le cours sur les blocs en XHTML.

La propriété CSS qui nous permet de modifier la couleur d'arrière-plan s'appelle background-color et elle prend une couleur comme valeur, couleur que vous pouvez spécifier selon différents modèles (hexa, RGB ou encore prédéfinie). Je vous invite si vous avez loupé le cours sur les couleurs en CSS à aller y jeter un oeil

Reprenons notre exemple de code XHTML, et appliquons un arrière-plan rouge au mot "premier". Voici le code XHTML que nous utilisons :

<p>Ceci est un <strong>premier</strong> bloc.</p>

Et voici un exemple de code CSS pour mettre l'arrière-plan de la balise <strong> en rouge :

strong{
background-color:red;
}

Vous voyez, c'est très simple ! Si vous souhaitez mettre l'arrière-plan du paragraphe en jaune, vous pourrez utiliser le code suivant :

p{
background-color:yellow;
}

Mais pourquoi lorsque je mets mon paragraphe en jaune (et que je ne touche pas au mot "premier") tout l'arrière-plan est en jaune, même le mot "premier"

Il s'agit d'une propriété CSS appelée héritage. Toutes les balises enfants (qui sont imbriquées dans une autre balise) héritent des propriétés de cette dernière (ce n'est pas valable pour tout, mais c'est valable pour les couleurs d'arrière-plan). Si vous souhaitez avoir l'arrière-plan de votre paragraphe en jaune et l'arrière-plan du mot "premier" en rouge, vous pourrez faire ceci :

p{
background-color:yellow;
}
strong{
background-color:red;
}

Voici ce que ça donne (je suis d'accord avec vous pour dire que c'est moche !)

arrière-plan d'un paragraphe et d'une balise strong

Si vous souhaitez que votre site ait une couleur d'arrière-plan par défaut (et non celle paramétrée dans le navigateur de l'internaute, ce qui peut être moche), il faut appliquer une couleur d'arrière-plan sur la balise <body>. Le principe est le même que pour un paragraphe ou toute autre balise !

Tout cela est bien beau, mais comment fait-on pour mettre des arrière-plans imagés Nous allons utiliser pour ça la propriété CSS background-image.

On l'utilise de la façon suivante : background-image:url("image.jpg"); mais on peut également mettre l'emplacement de l'image avec une URL absolue (http://site.com/image.jpg). Pour les chemins relatifs, pensez à toujours les définir par rapport à l'emplacement du fichier CSS.

Voici un exemple de ce que cela peut donner avec une image d'arrière-plan, choisie volontairement petite : fond 

étirable

Nous obtenons par défaut un remplissage de toute la page avec ce code :

body{
background-image:url("images/articles/css/fond_etirable.gif");
}

Voici ce que ça donne :

mosaique

Maintenant, si nous souhaitons que l'image d'arrière-plan ne soit répétée que dans un certain plan, on utilisera la propriété background-repeat. Celle-ci peut prendre différentes valeurs :

Voici un aperçu avec la propriété background-repeat placée à repeat-x :

répétition sur l'axe horizontal

Et voici le code CSS associé :

body{
background-image:url("images/articles/css/fond_etirable.gif");
background-repeat:repeat-x;
}

Il est possible de ne pas utiliser la propriété background-repeat pour spécifier la répétition d'arrière-plan. On peut le faire directement dans la propriété background-image comme ceci : background-image:url("images/articles/css/fond_etirable.gif") repeat-x; par exemple.

C'est bien tout ce qu'on apprend, mais si je souhaite que l'image d'arrière-plan ne soit pas placée par défaut en haut à gauche, je fais comment

Et bien nous allons utiliser une nouvelle propriété CSS qui s'appelle cette-fois background-position. Elle va nous permettre de placer l'image d'arrière-plan à la position que l'on souhaite (au pixel près). Elle s'utilise comme ceci : background-position:X Y;, X étant la coordonnée sur l'axe des abscisses (horizontal) et Y la coordonnée sur l'axe des ordonnées (vertical). Ces deux valeurs peuvent être prédéfinies ou mises dans l'unité de votre choix. Voici les différentes valeurs prédéfinies que vous pouvez utiliser pour X :

Voici maintenant les différentes valeurs prédéfinies existant pour Y :

Voici un exemple en CSS pour afficher l'image en bas à droite :

body{
background-image:url("images/articles/css/fond_etirable.gif");
background-position:right bottom;
}

Heu Antho, j'ai appliqué ton exemple et cela ne fonctionne pas, mon image est à droite mais elle n'est pas en bas, comment ça se fait

Il faut attribuer une hauteur à votre body, car par défaut celui-ci a une hauteur égale à la hauteur totale nécessaire pour afficher le texte. Si votre page est trop courte alors le body n'aura pas une hauteur suffisament grande pour que l'image d'arrière-plan se cale en bas à droite.

Il n'y a pas que des valeurs prédéfinies pour la position. Vous pouvez utiliser les pixels ou encore toute autre unité que nous avons vu dans les précédents chapitres. Un exemple pour placer l'image à 150 pixels à gauche et 20 pixels du haut : background-position:150px 20px;. Vous pouvez également combiner la position dans le background-image : background-image:url("images/articles/css/fond_etirable.gif") repeat-x 150px 20px;

Une autre propriété dont je ne vous ai pas encore parlé va permettre de fixer ou non l'image d'arrière-plan par rapport au conteneur, c'est à dire que lorsque vous ferez défiler l'ascenseur éventuel sur votre navigateur, l'arrière-plan restera soit fixe, soit il défilera avec le conteneur. Par défaut, l'arrière-plan défile. Cette propriété s'appelle background-attachment et peut prendre les valeurs suivantes :

Je vous laisse essayer pour voir ce que ça donne

Récapitulons : dans ce chapitre, nous avons vu comment mettre des arrière-plans personnalisés à nos conteneurs. Dans les chapitres suivants, nous verrons comment faire d'autres jolis effets (zoom, transparence, bordures, etc.) sur les images (ou sur d'autres blocs)

Vous avez aimé cet article intitulé Feuilles de style : arrière-plans ? Partagez-le !
Vulgarisation-informatique.com
Cours en informatique & tutoriels