Glossaire des propriétés CSS

III. Propriétés de mise en forme d'arrière-plans▲

III-A. Couleur de fond▲

III-A-1. Couleur de fond | background-color▲

background-color : définit la couleur de fond de l'élément.

Syntaxe : <color> | transparent | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Complément d'information : Les couleurs en CSS 3.

Version CSS : 1

Sélectionnez

background-color: red;
background-color: #C0C0C0;
background-color: rgb(0, 255, 0);
background-color: rgba(0, 255, 0, 0.6);
background-color: hsl(250, 100%, 50%);
background-color: hsla(250, 100%, 50%, 0.6);

Lorem ipsum dolore sit amet

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .background-color1 {
        background-color: red;
        border: 2px solid #696969;
        margin-bottom: 10px;
    }
 
    .background-color2 {
        background-color: #C0C0C0;
        border: 2px solid #696969;
        margin-bottom: 10px;
    }
 
    .background-color3 {
        background-color: rgb(0, 255, 0);
        border: 2px solid #696969;
    }
</style>
<div style="width: 60%;">
    <p class="background-color1">Lorem ipsum dolore sit amet</p>
    <p class="background-color2">Lorem ipsum dolore sit amet</p>
    <p class="background-color3">Lorem ipsum dolore sit amet</p>
</div>

III-B. Image de fond▲

III-B-1. Image de fond | background-image▲

background-image : indiquer l'URL de l'image (chemin absolu ou relatif).

Syntaxe : <uri> | none | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype et ne supporte pas plusieurs images de fond pour un même élément. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

background-image: url("./images/background.png"); /* relatif */

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .background-image {
        width: 100px;
        height: 100px;
        background-image: url('./images/background.png');
        border: 2px solid #696969;
    }
</style>
<div class="background-image"></div>

III-B-2. Fond fixé | background-attachment▲

background-attachment : permet de fixer le fond lors du défilement de la page.

Syntaxe : scroll | fixed | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

fixed : le fond reste fixe quand on scrolle ;
scroll : le fond défile quand on scrolle (par défaut).

Sélectionnez

background-attachment: fixed;
background-attachment: scroll;

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .background-attch1 {
        background-image: url('./images/background.png');
        background-attachment: fixed;
        background-repeat: no-repeat;
    }
 
    .background-attch2 {
        background-image: url('./images/background.png');
        background-repeat: no-repeat;
        background-attachment: scroll;
    }
</style>
<div class="background-attch1">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
    sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
    sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
    sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="background-attch2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
    sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
    sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

III-B-3. Répétition du fond | background-repeat▲

background-repeat : permet de répéter ou non le fond.

Syntaxe : repeat | repeat-x | repeat-y | no-repeat | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

repeat : le fond est répété (par défaut) ;
repeat-x : le fond est répété horizontalement ;
repeat-y : le fond est répété verticalement ;
no-repeat : le fond est affiché une fois, il n'est pas répété.

Sélectionnez

background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .background-repeat1 {
        width: 200px;
        height: 200px;
        background-image: url('./images/background.png');
        background-repeat: repeat;
        float: left;
        border: 2px solid #696969;
        margin-right: 20px;
    }
 
    .background-repeat2 {
        width: 200px;
        height: 200px;
        background-image: url('./images/background.png');
        background-repeat: repeat-x;
        float: left;
        border: 2px solid #696969;
        margin-right: 20px;
    }
 
    .background-repeat3 {
        width: 200px;
        height: 200px;
        background-image: url('./images/background.png');
        background-repeat: repeat-y;
        float: left;
        border: 2px solid #696969;
        margin-right: 20px;
    }
 
    .background-repeat4 {
        width: 200px;
        height: 200px;
        background-image: url('./images/background.png');
        background-repeat: no-repeat;
        float: left;
        border: 2px solid #696969;
    }
</style>
<div class="background-repeat1"></div>
<div class="background-repeat2"></div>
<div class="background-repeat3"></div>
<div class="background-repeat4"></div>
<div style="clear: both;"></div>

III-B-4. Position du fond | background-position▲

background-position : permet de définir l'emplacement du fond. Utilisé pour la gestion de sprite par exemple. Pour fonctionner sous Firefox et Opera, la propriété background-attachment doit être à fixed.

Syntaxe : [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Il y a deux possibilités pour cette propriété :

la première, en définissant la position en px ou % depuis le coin en haut à gauche ;
Sélectionnez
```
background-position: 100px 20px; /* 100px à droite, 20px en bas */
```
la seconde, en utilisant les valeurs prédéfinies pour la verticale et pour l'horizontale :

Sélectionnez

background-position: top; /* en haut, verticalement */
background-position: center; /* au milieu, verticalement */
background-position: bottom; /* en bas, verticalement */
 
background-position: left; /* à gauche, horizontalement */
background-position: center; /* au centre, horizontalement */
background-position: right; /* à droite, horizontalement */

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .background-pos1 {
        width: 200px;
        height: 200px;
        background-image: url('./images/background.png');
        background-repeat: no-repeat;
        background-position: 100px 20px;
        border: 2px solid #696969;
    }
</style>
<div class="background-pos1"></div>

III-B-5. Fond tout-en-un | background▲

background : comme la propriété font, il est possible de définir le fond en une seule fois via background.
L'ordre importe peu, mais il est possible de définir : background-image, background-repeat, background-attachment, background-position.

Syntaxe : ['background-color' || 'background-image' || 'background-repeat' || 'background-attachment' || 'background-position'] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype et ne supporte pas plusieurs images de fond pour un même élément. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

background: url("./images/background.png") no-repeat top right; /* l'image reste en haut à droite de l'écran et n'est pas répété */

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .background1 {
        width: 200px;
        height: 200px;
        background: url('./images/background.png') no-repeat top right;
        border: 2px solid #696969;
    }
</style>
<div class="background1"></div>

III-B-6. Transparence | opacity▲

opacity / filter : permet de rendre un élément transparent à un certain pourcentage. Pour IE8 et ses précédentes versions, il faut passer par la propriété filter. Le reste des navigateurs acceptent opacity.

Syntaxe : <valeur> | inherit

Compatibilité : IE 9, FF 3.6+, Chrome 17+, Safari 5+, Opera 11.6+

Note : IE 8 et précédents supporte un équivalent : filter: alpha(opacity=50).

Version CSS : 3

Sélectionnez

opacity: 0.5;
filter: alpha(opacity=50); /* <= IE8 */

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .opacity1 {
        width: 100px;
        height: 100px;
        background-image: url('./images/background.png');
        border: 2px solid #696969;
    }
 
    .opacity2 {
        width: 50px;
        height: 50px;
        background-color: red;
        opacity: 0.5;
        filter: alpha(opacity=50);
    }
</style>
<div class="opacity1">
    <div class="opacity2"></div>
</div>

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2013 Torgar. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.