Les Fiches de MonWebFacile





Chapitre

Fiche

 

Fiche CSS : Arrières plans  (background)

Objet de la fiche :

État de la fiche Terminée validée


Plan de la fiche :

Avant propos

Cette fiche  présente les façons d'appliquer des couleurs et des images d'arrière-plan à vos pages Web ou à des éléments de votre page. Pour cela les feuilles de style mettent à notre disposition les propriétés décrites ci-dessous et applicables sur n'importe quel attribut html possédant un dimensionnement comme les balises de type Bloc  telles que h1, h2, h3,p, div, span, tab, form ...

Pour tous les exemples ci dessous les propriétés seront définies en feuille de style.

Propriétés générales d'arrière plan
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 :.

Définir la couleur
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>

background-image
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


background-attachment
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


background-repeat
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".

Retrouvez la solution


Respectons la propriété intellectuelle