IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Glossaire des propriétés CSS


précédentsommairesuivant

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

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Voir la source
Cacher/Afficher le codeSélectionnez

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

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.

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.

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.

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.

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.

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

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

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

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

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

précédentsommairesuivant

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.