Fiche CSS : Arrières plans (background)Objet de la fiche :État de la fiche
|
| Propriétés / Attributs | Commentaires |
|---|---|
| background-color | Définir la couleur d'arrière plan d'un l'élément html |
| background-image | Défini l'image d'arrière-plan d'un élément HTML |
| background-attachment | Fixe l'image d'arrière plan |
| background-position | Position de l'image d'arrière plan |
| background | Propriété raccourcie |
background-color
Défini la couleur de fond d'un élément HTML
Syntaxe CSS générale
<style type="text/css">
classe ou sélecteur {background-color:Définition de la couleur}
</style>
Définir une couleur
La couleur d'un élément HTML peut être définie de plusieurs manières :.
| Propriété | mot-clé | Commentaires |
|---|---|---|
| background-color | nom couleur | Définir la couleur d'arrière plan de l'élément html |
| code hexadécimal | ||
| valeur décimale | ||
| transparent | Laisser voir les couleurs situées plus en dessous. | |
| inherit | La couleur de fond aura la même valeur que le parent. |
Définition des couleurs par noms génériques
Nom de la couleur : White, Blue, Silver ....soit une des 16 couleurs fondamentales dénommées par un nom parlant (en anglais) normalisées et reconnues par tous les navigateurs.
<style type="text/css">
classe ou sélecteur {background-color:blue}
</style>
| Aqua | Black | Blue | Fuchsia | Gray | Green | Lime | Maroon |
| Navy | Olive | Purple | Red | Silver | Teal | White | Yellow |
Exemple avec le nom de couleur Silver appliquée à la balise <body>
Définition des couleurs par un code hexadécimal (#XXYYZZ)
La couleur est désignée par son code hexadécimal (un dièse suivi de 6 digits). Les deux premiers digits (XX) représentent la valeur de rouge, les deux suivants (YY) le vert et les deux derniers( ZZ) le bleu. En mélangeant dans des proportions différentes ces trois couleurs de base, on peut obtenir toutes les couleurs. On retrouve ci dessous les caractères hexadécimaux des couleurs définies précédemment.
<style type="text/css">
classe ou sélecteur {background-color:#808000}
</style>
| #00FFFF | #000000 | #0000FF | #FF00FF | #808080 | #008000 | #00FF00 | #800000 |
| #000080 | #808000 | #800080 | #FF0000 | #C0C0C0 | #008080 | #FFFFFF | #FFFF00 |
Exemple avec la couleur #80C4D2 appliquée à la balise <body>
Définition des couleurs par un code décimal rouge/vert/bleu
La couleur est définie par trois nombres de 0 à 255 indiquant respectivement le taux de rouge, le taux de vert et le taux de bleu. Cette notation est identique à la précédente seule la base de numérotation diffère : on écrit FF en hexadécimal ce qui équivaut à 255 en décimal.
Dans la notation rgb(a b c) a,b,c représentent chacun des entiers de 0 à 255. On peut aussi noter de la façon suivante : rgb(15% 55% 80%) pour obtenir une couleur composée de 15% de rouge, 55% de vert et 80% de bleu. La couleur Olive par exemple définie comme rgb(128, 128, 0) pourrait être définie comme rgb(50%, 50%, 0%) : en effet 128 est la moitié de 255 soit 50% de la valeur max.
<style type="text/css">
classe ou sélecteur {background-color:rgb(100,50,45}
</style>
| (0,255,255) | (0,0,0) | (0,0,255) | (255,0,255) | (128,128,128) | (0,128,0) | (0,255,0) | (128,0,0) |
| (0,0,128) | (128,128,0) | (128,0,128) | (255,0,0) | (192,192,192) | (0,128,128) | (255,255,255) | (255,255,0) |
Exemple avec la couleur rgb(245, 105, 161) appliquée à la balise <body>
classe ou sélecteur {background-color:transparent} pour laisser voir les couleurs situées plus en dessous.
background-image
Défini l'image d'arrière-plan d'un élément
Syntaxe CSS générale
<style type="text/css">
classe ou sélecteur {background-image:url('adresse de
l'image')}
</style>
| Propriété | mot-clé | Commentaires |
|---|---|---|
| background-image | url('adresse de l'image') | Une image |
| none | Pas d'image |
Déclaration de l'image
url('adresse image') : donne l'adresses absolue ou relative de notre image.
Adresse absolue : le chemin d'accès à l'image à partir de la racine générale.
Exemple :http://monwebfacile.free.fr/Travail/Images/NotreImage2.gif
Adresse relative : c'est le chemin d'accès à l'image par rapport à l'emplacement de la page internet.
Exemple d'une image appliquée à la balise <body>
background-attachment
La propriété de feuille de style css background-attachment permet de fixer l'image d'arrière plan (image de fond) lorsque l'on utilise les barres de défilement. 3 mots clé sont à votre disposition.
Syntaxe CSS générale
<style type="text/css">
classe ou sélecteur {background-attachment:mot-clé}
</style>
Définir l'attachement
| Propriété | mot-clé | Commentaires |
|---|---|---|
| background-attachment | fixed | Arrière plan fixe |
| scroll | Arrière plan mobile | |
| inherit | Héritage de la propriété du parent |
background-attachment:fixed
L'arrière plan ou fond reste en place lorsque l'on utilise les barres de défilement (scroll).
Exemple d'un arrière plan fixe appliqué à la balise <body>
background-attachment:scroll
l'arrière plan ou fond se déplace lorsque l'on utilise les barres de défilement (valeur par défaut).
Exemple d'un arrière plan mobile appliqué à la balise <body>
background-attachment:inherit
L'arrière plan ou fond hérite des propriétés de son parent (css 2)
IE (Internet Explorer) pour Windows ne sait pas interpréter le background-attachment:fixed sur autres balises que la balise <body> (corps de page).
On ne peut donc pas fixer à l'écran la position d'un fond autre que celui qui est contenu dans cette balise-là.
Cela limite à 1 le nombre de fonds immobilisés qu'il est possible de voir dans IE.
background-repeat
La propriété de feuille de style css background-repeat paramètre si une image d'arrière plan doit être répétée et si oui comment cette répétition doit-elle se faire.
Syntaxe CSS générale
<style type="text/css">
classe ou sélecteur {background-repeat:mot-clé}
</style>
Définir la répétition
| Propriété | mot-clé | Commentaires |
|---|---|---|
| background-repeat | repeat | répétition image horizontalement et verticalement |
| repeat-x | répétition image horizontalement seulement | |
| repeat-y | répétition image verticalement seulement | |
| no-repeat | Pas de répétition de l'image | |
| inherit | Héritage de la propriété du parent |
background-repeat:repeat
l'image d'arrière plan sera répétée horizontalement et verticalement (par défaut).
Exemple d'un arrière plan répété appliqué à la balise <body>
background-repeat:repeat-x
l'image d'arrière plan sera répétée horizontalement.
Exemple d'un arrière plan répété horizontalement appliqué à la balise <body>
background-repeat:repeat-y
l'image d'arrière plan sera répétée verticalement.
Exemple d'un arrière répété verticalement appliqué à la balise <body>
background-repeat:no-repeat
l'image d'arrière plan ne sera pas répétée.
Exemple d'un arrière plan no répété appliqué à la balise <body>
background-position
La propriété de feuille de style css background-position permet de définir avec précision l'emplacement d'une image dans une page ou encore dans des éléments de type bloc. Quand on spécifie une image d'arrière-plan, cette propriété indique la position initiale de celle-ci. Cette propriété ne bénéficie pas de la règle d'hérédité.
Syntaxe CSS générale
<style type="text/css">
classe ou sélecteur {background-position:mot-clé}
</style>
Les valeurs de base
top = position haut de la page ou du bloc.
center = position centre de la page ou du bloc.
bottom = position bas de la page ou du bloc..
right = position droite de la page ou du bloc.
left = position gauche de la page ou du bloc.
Les variantes
A partir de ces mots clé les variantes suivantes sont possibles pour un positionnement en X (droite vers gauche) et Y (haut vers bas).
La première valeur correspond à sa position sur l'axe X et la seconde correspond à sa position sur l'axe Y.
X et Y peuvent être en % .
- top left identique à left top identique à 0% 0% de la page ou du bloc.
- top center identique à center top identique à 0% 50% de la page ou du bloc.
- top right identique à right top identique à 0% 100% de la page ou du bloc.
- center left identique à left center identique à 50% 0% de la page ou du bloc.
- center center identique à 50% 50% de la page ou du bloc.
- center right identique à right center identique à 100% 50% de la page ou du bloc.
- bottom left identique à left bottom identique à 100% 0% de la page ou du bloc.
- bottom center identique à center bottom identique à 100% 50% de la page ou du bloc.
- bottom right identique à right bottom identique à 100% 100% de la page ou du bloc.
Les exotiques
Des longueurs par paire, avec par exemple 5cm 5cm c'est-à-dire que le coin haut / gauche de l'image se place à 5cm vers la droite et à 5cm vers le bas par rapport au coin haut / gauche de la boîte.
Les valeurs de longueur utilisables sont : cm, em, in, mm, px, pt, pc.
En pourcentage ou en longueur, lorsqu'on ne donne qu'une seule valeur, celle-ci concerne la position horizontale, et la position verticale est automatiquement fixée à 50%.
Lorsqu'on donne deux valeurs avec toujours un espace entre les deux, il est possible de combiner des valeurs de pourcentage avec des valeurs de longueur (ex. 50% 2cm). Les positions négatives sont permises. Par contre il n'est pas possible de combiner des valeurs de pourcentage ou de longueur.
Exemple
Position d'arrière plan sur la gauche et à 2/3 de la hauteur appliqué à la balise <body>
background
La propriété background est une propriété raccourci qui sert à regrouper les propriétés individuelles background-color, background-image, background-repeat, background-attachment et background-position dans la feuille de style.
La propriété background initialise toutes les propriétés individuelles d'arrière-plan à leur valeur par défaut, puis applique les valeurs explicites de la déclaration.
Tout ce que nous avons fait jusqu'à maintenant pourrait aussi s'écrire :
<html>
<head>
<title>Construire mon site pas à pas</title>
<style type="text/css">
body {
background: Silver url('Images/Bouquet2.png') fixed no-repeat 0% 75%;
}
</style>
</head>
<body>
</body>
</html>
Exemples
Exemples appliqués à d'autres balises que body
Exemple d'effets avec l'utilisation de la propriété repeat
L'astuce consiste à utiliser des images de base de très faibles dimensions et d'utiliser repeat pour obtenir l'effet désiré.
avec repeat-y et l'image 
pour donner un effet cahier spirale.
avec repeat-x et l'image 
pour donner un effet de bandeau.
Prendre les bonnes habitudes
En même temps qu'une image, il est conseillé de spécifier une couleur d'arrière-plan, cette couleur étant employée en remplacement si l'image est indisponible. Celle-ci, une fois disponible, vient se superposer en partie ou en totalité sur le fond coloré. La couleur du fond sera visible au travers des zones transparentes de l'image, si cette dernière a été enregistrée dans un format qui gère la transparence.
Attention à votre choix de fond : veuillez à ce que le contraste entre le fond et la couleur des caractères permette une bonne lisibilité de la page web.
Application au projet de site web
Le but est d'appliquer une couleur et une image de fond pour l'ensemble des pages de notre site. Pour cela on effectuera les modifications suivantes dans la fichier de feuille de style externe CSSExterneScreen.css
- Couleur de fond à appliquer : #edd571
- L'image de fond à appliquer : "PompeEauRosier.png" du répertoire "Images", sous répertoire "Site".
