FAQ CSSConsultez toutes les FAQ

Nombre d'auteurs : 17, nombre de questions : 59, dernière mise à jour : 30 mars 2017 

 
OuvrirSommaireTechniquesDécorationsArrière plans

C'est l'attribut background-color qu'il faut définir.

 
Sélectionnez

<input style="background-color:'#33FF00'" type="text" name="ma_zone_de_texte" />
        

L'attribut background-color peut être défini grâce au modèle de couleur RGB pour la spécification numérique des couleurs.

Exemple :

 
Sélectionnez

em
{
  color: #ff0000
}
em
{
  color: rgb(255,0,0) 
}
em
{
  color: rgb(100%, 0%, 0%) 
}
        

Ou grâce à l'un de ces mots clés : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white et yellow.

Exemple :

 
Sélectionnez

h1
{
  color: maroon
}
h2
{
  color: olive
}
        

On peut utiliser le même principe pour modifier la couleur d'un bouton de type input.

Attention : Cette propriété peut être utilisé pour tout autres type de balises

Mis à jour le 8 octobre 2012  par debug

Il faut utiliser la propriété background de l'élément à décorer.

Définition du style (exemple avec la balise body) :

 
Sélectionnez

body
{
  /* url de l'image */
  background-image : url(image.gif) ; 
 
  /* définit si l'image est répétée. Valeurs possibles : 
  no-repeat : l'image n'est affichée qu'une seule fois.
  repeat : l'image est répétée verticalement et horizontalement.
  repeat-y : l'image est répétée verticalement.
  repeat-x : l'image est répétée horizontalement .*/
  background-repeat : no-repeat ; 
 
  /* définit si l'image est fixe ou si elle bouge lors que l'on descend dans le document à l'aide des ascenseurs. Valeurs possibles :
  scroll : l'image bouge avec les ascenseurs.
  fixed : l'image est toujours fixe. */
  background-attachment : fixed ; 
 
  /* définit la position horizontale de l'image par rapport au côté gauche. Valeurs possibles : 
  left : l'image est alignée à gauche.
  center : l'image est centrée.
  right : l'image est alignée à droite. */
  background-position-x : center ;
 
  /* définit la position verticale de l'image par rapport au côté supérieur. Valeurs possibles :
  top : l'image est alignée en haut.
  center : l'image est centrée.
  bottom : l'image est alignée en bas. */
  background-position-y : center ;
}
        

Puis appel du style :

 
Sélectionnez

<body>
  les sauts de lignes sont là pour faire apparaître les ascenseurs.
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
        

Concernant la définition des propriétés background-position-x (resp. background-position-y), il est également possible d'utiliser des longueurs (px, em ou toute unité de longueur) et des pourcentages.

  • Définition d'une longueur : vous indiquez la distance entre le côté gauche (resp. haut) de l'élément à décorer et le côté gauche (resp. haut) de l'image de fond.
  • Définition d'un pourcentage : Si vous définissez une distance de 25%, alors le point se situant à 25% de l'image de fond se situe à 25% de l'élément à décorer.
    Ceci implique que :
    • une valeur de 0% équivaut à left (resp. top) ;
    • une valeur de 50% équivaut à center ;
    • une valeur de 100% équivaut à right (resp. bottom).

La valeur fixed de la propriété background-attachment n'est pas correctement implémentée sur les navigateurs IE 6 et inférieurs pour les éléments autres que body.

Mis à jour le 29 février 2008  par Giminik, MasterOfChakhaL

Pour rendre un fond transparent, il existe deux solutions.

  • Utilser les propriétés CSS suivantes:
Code CSS
Sélectionnez

selecteur {
  opacity: 0.5;              /* valeur entre 0 et 1 | pour les navigateurs qui supportent la propriété opacity */
  filter: alpha(opacity=50); /* valeur entre 0 et 100 | Fitre Alpha pour IE */
  -moz-opacity: 0.5;         /* valeur entre 0 et 1 | Syntaxe réservée au moteur de rendu Gecko (Firefox, SeaMonkey etc.) */
  -khtml-opacity: 0.5;       /* valeur entre 0 et 1 Syntaxe réservée au moteur de rendu KHTML (Konqueror) */
}

Attention : filter, -moz-opacity, -khtml-opacity sont des propriétés propriétaires, donc invalide CSS.
opacity existe uniquement dans les spécifications CSS3, donc invalide CSS1/2/2.1.

Mis à jour le 18 septembre 2009  par trotters213, Macmillenium
  

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 © 2004 Developpez.com Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.