Html - Couleurs et arrières-plans

Couleurs et arrières-plans

Couleurs et arrières-plans

Par Mathieusub, publié le 16/12/2010 à 09:59:56

La propriété 'background-color' :

La propriété background-color décrit la couleur d'arrière-plan des éléments.

L'élément <body> est le réceptacle de tout le contenu du document HTML. Pour changer la couleur d'arrière-plan d'une page entière, il faudrait donc appliquer la propriété 'background-color' à l'élément <body>. Placer ce code entre les balises <head></head> de votre page :

<style type="text/css">

<!--

body {

background-color: #FFCC66;

}

-->

</style>

Les images d'arrière-plan 'background-image' :

La propriété CSS background-image sert à insérer une image d'arrière-plan.

Comme exemple d'image d'arrière-plan, nous utilisons le bateau ci-dessous. Vous pouvez télécharger l'image pour l'utiliser sur votre propre ordinateur (en cliquant sur le bouton de droite de la souris et en sélectionnant « Enregistrer l'image sous », ou vous pouvez utiliser une autre image si vous voulez.

Pour insérer l'image du papillon en arrière-plan d'une page Web, appliquez simplement la propriété background-image à l'élément <body> et indiquez le chemin de l'image, comme ceci :

<style type="text/css">

<!--

body {

background-image: url("Webtoriaux-Mathieusub-qf0739txky-BWBW0906.jpg");

}

-->

</style>

Remarquez la façon dont nous avons indiqué le chemin de l'image avec url("Webtoriaux-Mathieusub-qf0739txky-BWBW0906.jpg"). Cela signifie que l'image se trouve dnas le même dossier que la feuille de style. On peut aussi appeler des images dans d'autres dossiers avec url("../images/Webtoriaux-Mathieusub-qf0739txky-BWBW0906.jpg"), ou même sur Internet en donnant l'adresse complète du fichier : url("http://www.webtutoriaux.com/stocks/images/Webtoriaux-Mathieusub-qf0739txky-BWBW0906.jpg").

Répéter l'image d'arrière-plan 'background-repeat' :

Avez-vous remarqué, dans l'exemple précédent, que le bateau était répété par défaut horizontalement et verticalement pour couvrir la totalité de l'écran ? Ce comportement est contrôlé par la propriété background-repeat.

Voici les quatre valeurs différentes de background-repeat :

- L'image se répète horizontalement | Background-repeat: repeat-x
- L'image se répète verticalement | Background-repeat: repeat-y
- L'image se répète horizontalement et verticalement | background-repeat: repeat
- L'image ne se répète pas | background-repeat: no-repeat

Par exemple, pour éviter la répétition d'une image d'arrière-plan, le code devrait ressembler à ceci :

<style type="text/css">

<!--

body {

background-image: url("Webtoriaux-Mathieusub-qf0739txky-BWBW0906.jpg");

background-repeat: no-repeat;

}

-->

</style>

Bloquer l'image d'arrière-plan 'background-attachment' :

La propriété background-attachment définit si l'image d'arrière-plan est fixe ou bien défile avec l'élément conteneur.

Une image d'arrière-plan bloquée ne bougera pas avec le texte lorsque le lecteur fait défiler la page, au contraire d'une image d'arrière-plan non bloquée qui défilera avec le texte de la page Web.

Voici les deux valeurs différentes de background-attachment :

- L'image défile avec la page (non bloquée) | Background-attachment: scroll
- L'image est bloquée | Background-attachment: fixed

Par exemple, le code suivant bloquera l'image d'arrière-plan :

<style type="text/css">

<!--

body {

background-image: url("Webtoriaux-Mathieusub-qf0739txky-BWBW0906.jpg");

background-repeat: no-repeat;

background-attachment: fixed;

}

-->

</style>

Positionner une image d'arrière-plan 'background-position' :

Par défaut, l'image d'arrière-plan se positionnera dans le coin supérieur gauche de l'écran. La propriété background-position permet de changer cette position prédéfinie et de placer l'image d'arrière-plan n'importe où à l'écran.

Il y a plusieurs méthodes pour fixer la valeur de background-position. Par contre, elles se présentent toutes sous la forme d'un jeu de coordonnées. Par exemple, la valeur'100px 200px' positionne l'image d'arrière-plan à 100px depuis la gauche et à 200px depuis le haut de la fenêtre du navigateur.

Les coordonnées peuvent s'exprimer en pourcentages de la largeur de l'écran, ou en unités fixes (pixels, centimètres, etc.), ou on peut utiliser les mots-clés "top", "bottom", "center", "left" ou "right". Le modèle suivant illustre ce système :

Voici quelques exemples :

- L'image est positionnée à 2 cm de la gauche et à 2 cm du haut de la page | background-position: 2cm 2cm
- L'image est positionnée au centre et à un quart de la page vers le bas | background-position: 50% 25%
- L'image est positionnée au coin supérieur droit de la page | background-position: top right

L'exemple de code à suivre positionne l'image d'arrière-plan dans le coin inférieur droit de la page :

<style type="text/css">

<!--

body {

background-image: url("Webtoriaux-Mathieusub-qf0739txky-BWBW0906.jpg");

background-repeat: no-repeat;

background-attachment: fixed;

background-position: right bottom;

}

-->

</style>

Et voilà, ce tutoriel est terminé !
(Un exemple de mise en page est disponible en téléchargement ci-dessous)

Téléchagement

Téléchargement du fichier source

index.html - 611 octets

Webtoriaux-Mathieusub-qf0739txky-BWBW0906.jpg - 2788 octets

Vous devez être connecté pour télécharger ce fichier zip

Ajouter un commentaire

Informations sur le tutoriel