Accueil du site > Internet. > HTML > CSS
Images et couleurs d’arrière-plan.
mardi 20 juillet 2010
par
Couleur d’arrière-plan
Propriété | background-color |
Exemple | p.relief { background-color: yellow; } |
Valeurs possibles | nom de couleur prédéfini ou code RVB ;transparent (valeur par défaut). |
Héritage | Cette propriété n’est pas héritée, mais la valeur par défaut transparent laisse voir la couleur de l’élément conteneur ou se trouvant en dessous. |
Nota.
On travaille sur toute les pages.
color:white;
permets d’avoir une police en blanc.
Image d’arrière-plan
La propriété background-image permet d’afficher une image en arrière- plan d’un bloc.
Propriété | background-image |
Exemples | body {background-image:url(images/maison.png);} .pub {background-image:url(http://www.pub.com/logo.gif);} |
Valeurs possibles | url (nom d’image avec chemin relatif ou absolu) ou none : aucune image (valeur par défaut). |
Héritage | Non. |
Répétition ou non de l’image d’arrière-plan
Propriété | background-repeat |
Exemples | body { background-repeat: repeat-y; } .pub { background-repeat: no-repeat; } |
Valeurs possibles | repeat : répétition horizontale et verticale (valeur par défaut).repeat-x : répétition horizontale seulement.repeat-y : répétition verticale seulement.no-repeat : pas de répétition. |
Héritage | Non. |
Exemple.
Nota.
On obtient un
coucou
qui se répétera que sur la première colonne, verticalement.
Alignement de l’image d’arrière-plan
Avec la propriété background-position
, il est possible de préciser la position horizontale et la position verticale de l’image d’arrière-plan à l’intérieur du bloc dont elle constitue le fond.
Cette position est exprimée par rapport aux bords de l’élément.
Propriété | background-position |
Exemples | body { background-position: center top; } .pub { background-position: left center; } |
Valeurs possibles | Une ou deux valeurs, données par des noms ou des nombres (dimension relative ou absolue, souvent exprimée en %). Première valeur pour l’alignement horizontal : left , center (valeur par défaut), right ou nombre (0% = left, 100% = right).Deuxième valeur pour l’alignement vertical : top , center (valeur par défaut), bottom ou nombre (0% = top, 100% = bottom).Pourcentage % de la taille de la boîte elle-même. |
Héritage | Non. |
Il est possible d’indiquer des nombres négatifs, pour « rogner » l’image.
Voici les positions possibles :
top |
en haut. |
bottom |
en bas. |
left |
à gauche. |
center |
centré. |
right |
à droite. |
Fixation de l’image d’arrière-plan
Propriété | background-attachment |
Exemples | body { background-attachment: scroll; } .pub { background-atachment: fixed; } |
Valeurs possibles | scroll : l’image défile avec le contenu (valeur par défaut) ;fixed : l’image reste fixe lors du défilement, seul défile le contenu qui est au premier plan. |
Héritage | Non. |
Raccourcis pour les arrière-plans
Propriété | background |
Exemple | h1 { background: blue url(logo.png) 50% repeat-x fixed; } |
Valeurs possibles | Valeurs de background-color , background-image , background-repeat , background-attachment , background-position dans un ordre quelconque. |
Héritage | Non. |
bibblefree
Articles de cet auteur
Mots-clés
-
Navigation
- #Accélérer l’affichage des pages Web avec Iceweasel. [Firefox]
- #Proxy par defaut pour tous les utilisateurs de Windows 7. [Astuces.]
- #Échec de la connexion sécurisée - Code d’erreur : sec_error_revoked_certificate [Firefox]
- #Changer le navigateur par défaut dans Thunderbird. [Thunderbird]
- #Thunderbird est long au démarrage. [Thunderbird]
-
Site Web
- #Installation d’AngularJs sur HandyLinux. [La console]
- #Accélérer l’affichage des pages Web avec Iceweasel. [Firefox]
- #Installation d’un serveur d’essai. [Debian.]
- #Échec de la connexion sécurisée - Code d’erreur : sec_error_revoked_certificate [Firefox]
- #Rechercher des maliciels à l’aide de Linux Malware Detect (LMD) [Debian.]
Site en travaux
Attention : un problème technique (serveur SQL) empêche l'accès à cette partie du site. Merci de votre compréhension.
Accueil du site |
Contact |
Plan du site
| Se connecter |
Statistiques du site |
Visiteurs :
151 /
0
© 2007 -2012 BiBBleFREE