FAQ CSS
FAQ CSSConsultez toutes les FAQ
Nombre d'auteurs : 17, nombre de questions : 59, dernière mise à jour : 14 juin 2021
Sommaire→Techniques→Décorations→Arrière plans
C'est l'attribut background-color qu'il faut définir.
<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 :
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 :
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
Il faut utiliser la propriété background de l'élément à décorer.
Définition du style (exemple avec la balise body) :
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 :
<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.
Pour rendre un fond transparent, il existe deux solutions.
- Utiliser des images translucides au format PNG (Comment corriger le problème de transparence des PNG24-32 sous IE6 ?).
- Utilser les propriétés CSS suivantes:
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.