CSS est un acronyme pour les feuilles de style en cascade. C'est un langage de conception simple mais puissant qui a la capacité de transformer des pages Web. En termes simples, il rationalise le processus de création de pages Web présentables et attrayantes pour les utilisateurs à l'aide de . Dans cet article, nous allons comprendre comment implémenter diverses images d'arrière-plan en CSS dans l'ordre suivant:
- Image d'arrière-plan dans les propriétés CSS
- Image d'arrière-plan en CSS
- Répétition du fond
- Pièce jointe en arrière-plan
- Position d'arrière-plan
- Image d'arrière-plan au format CSS
- Couleur de l'arrière plan
Image d'arrière-plan dans les propriétés CSS
Il existe de nombreuses propriétés utilisées pour contrôler les comportements et le positionnement de l'image. Ces propriétés sont:
- image de fond
- Répétition du fond
- background-attachment
- position de fond
- taille de fond
- Couleur de l'arrière plan
Nous nous familiariserons avec chacune de ces propriétés et verrons quand et comment les utiliser avec une démonstration intéressante.
Image d'arrière-plan en CSS
La image de fond La propriété comme son nom l'indique est simplement utilisée pour indiquer et définir l'image d'arrière-plan à travers un élément d'une page Web. Une image d'arrière-plan par défaut est placée dans le coin supérieur gauche d'un élément.
syntaxe: background-image: url | none | linear-gradient | radial-gradient
body {background-image: url ('apple.jpg')}arrière-plan à l'aide de l'URL
Comprenons les paramètres:
- URL: L'entrée de ce paramètre nous permet de spécifier soit un chemin de fichier vers n'importe quelle image, soit l'URL de l'image qui doit être définie comme arrière-plan. Pour déclarer plusieurs images, les URL sont séparées par une virgule.
body {background-image: url ('apple.jpg')} 
- aucun: Il s'agit de la valeur par défaut de la propriété et aucune image d'arrière-plan n'est rendue si sa valeur est spécifiée.
corps {arrière-plan: aucun}- gradient linéaire(): L'image d'arrière-plan est définie sur un dégradé linéaire. Un minimum d'au moins deux couleurs doit être spécifié pour cette propriété, c'est-à-dire de haut en bas.
body {background-color: # 001 background-image: linear-gradient (blanc 15%, transparent 16%), linear-gradient (white 15%, transparent 16%) background-size: 60px 60px background-position: 0 0, 30px 30px}- gradient radial (): L'image d'arrière-plan est définie sur un dégradé radial. Un minimum d'au moins deux couleurs doit être spécifié pour cette propriété, c'est-à-dire pour le centre aux bords.
body {background-color: # 001 background-image: radial-gradient (blanc 15%, transparent 16%), radial-gradient (white 15%, transparent 16%) background-size: 60px 60px background-position: 0 0, 30px 30px}- répétition-linéaire-gradient (): Il répète un dégradé linéaire. Utilisons le même exemple que nous avons vu ci-dessus dans le gradient linéaire pour répéter le gradient linéaire et voyons la différence.
body {background-color: # 001 background-image: repeating-linear-gradient (blanc 15%, transparent 16%), repeating-linear-gradient (white 15%, transparent 16%) background-size: 60px 60px background-position : 0 0, 30px 30px}- repeating-radial-gradient (): Il répète un dégradé radial. Explorons le même exemple que nous avons utilisé ci-dessus dans un dégradé radial.
body {background-color: # 001 background-image: repeating-radial-gradient (blanc 15%, transparent 16%), repeating-radial-gradient (blanc 15%, transparent 16%) background-size: 60px 60px background-position : 0 0, 30px 30px}Contexte de secours
Il est toujours conseillé, en tant que conseil professionnel, d'ajouter une couleur d'arrière-plan comme option de secours. Cela vient en particulier lorsque les images d'arrière-plan ne se chargent pas ou que l'arrière-plan dégradé que nous avons défini lors du développement n'est pas pris en charge par certains des anciens navigateurs sur lesquels il est visualisé.
Cela ne gâche pas l'expérience utilisateur et peut être déclaré comme ceci:
body {background: url (apple_lost.jpg) rose}Contexte multiple
Nous avons également une option pour définir plusieurs images d'arrière-plan et il est nécessaire dans la plupart des cas comme une image de premier plan et d'arrière-plan. L'ordre de l'image est important ici, l'image qui devrait être à l'avant est déclarée en premier, et l'image qui devrait être à l'arrière en dernier est déclarée ensuite.
Voici l'exemple pour plusieurs images d'arrière-plan:
body {image de fond: url ('petit-cœur.jpg'), url ('background.jpg')}Répétition du fond
La propriété background-repeat est utilisée avec l'image background-image pour définir le comportement de répétition d'une image. Il spécifie si et comment une image d'arrière-plan sera répétée. L'image d'arrière-plan par défaut est répétée à la fois verticalement et horizontalement.
Les valeurs possibles sont:
- répéter - L'image se répète horizontalement et verticalement
- no-repeat - L'image ne se répète pas
- repeat-x - L'image est répétée horizontalement
- repeat-y - L'image est répétée verticalement
- space- L'image est répétée avec des espaces ou des intervalles réguliers entre les deux.
- round - L'image est répétée pour remplir la zone sans aucun espace entre eux.
La syntaxe CSS pour la propriété background-repeat est:
Répétition du fond: répéter | répéter-x | répéter-y | pas de répétition | espace | rond
body {background-image: url ('heart.png'), url ('background.png') background-repeat: repeat-y, repeat-x background-color: #ffffff}Pièce jointe en arrière-plan
La background-attachment property est utilisée avec l'image d'arrière-plan pour indiquer si l'image doit ou non défiler lorsque le contenu défile. Cela signifie que l'image d'arrière-plan doit être fixe ou doit défiler avec le document par rapport à la vue de la fenêtre du navigateur. La valeur par défaut est de faire défiler.
Les valeurs possibles sont:
- scroll - L'image défile avec la page.
- fixe - L'image ne défilera pas avec la page
La syntaxe CSS pour la pièce jointe d'arrière-plan est:
background-attachment: défilement | fixe
body {background-image: url ('heart.png'), url ('background.png') background-repeat: espace, rond}Position d'arrière-plan
La position de fond La propriété est utilisée pour indiquer l'emplacement ou le positionnement d'une image d'arrière-plan. Les valeurs possibles sont:
- Haut
- droite
- bas
- la gauche
- centre
- combinaison de ces valeurs (par exemple, en haut à gauche)
La syntaxe CSS pour la position d'arrière-plan est:
background-position: haut | droite | gauche | bas | centre
body {background-image: url ('heart.png') background-repeat: pas de répétition background-attachment: scroll}Image d'arrière-plan au format CSS
Cette propriété est l'une des plus utiles car elle nous permet de contrôler la taille de l'image d'arrière-plan. Il existe différentes combinaisons que nous pouvons utiliser avec cette propriété et obtenir des résultats en conséquence. La valeur par défaut est auto.
Les valeurs suivantes peuvent être utilisées avec background-size:
- auto
- une longueur-hauteur et largeur de l'image, par ex. 20px 40px.
- un pourcentage-hauteur et largeur de l'image en pourcentage par rapport à l'élément parent, par ex. 50% 50%.
- centre - Alignez l'image au centre
- couverture, redimensionnant l'image pour couvrir complètement la zone d'arrière-plan.
- contient, redimensionnant l'image pour l'ajuster jusqu'à sa hauteur et sa largeur réelles.
La syntaxe CSS pour la position d'arrière-plan est:
background-size: valeur
body {background-image: url ('heart.png'), url ('background.png') background-repeat: pas de répétition, répéter background-size: 400px 150px, cover}body {background-image: url ('heart.png'), url ('background.png') background-repeat: pas de répétition, répéter background-size: contenir, 400px 150px}Couleur de l'arrière plan
C'est la plus simple de toutes les propriétés de CSS s'applique. Il applique des couleurs unies à l'arrière-plan de la page. La valeur de cette propriété peut être spécifiée en couleurs (par exemple, rouge, bleu, etc.), valeur hexadécimale et valeur RVB.
C ++ utilise un espace de noms
La syntaxe CSS pour la couleur d'arrière-plan est:
Couleur de l'arrière plan: valeur
body {background-image: url (small-heart.jpg) background-color: # 22a8e3}Ceci conclut toutes les propriétés que nous pouvons utiliser avec l'arrière-plan. Nous pouvons toujours essayer différentes combinaisons des propriétés comme nous l'avons vu dans notre démonstration.
CSS est essentiel et doit acquérir des compétences pour tous les développeurs Web frontaux. Il aide à concevoir et à styliser l'arrière-plan, à créer des sites Web impressionnants et à enrichir l'expérience utilisateur. Le mieux est de continuer à expérimenter et de tirer pleinement parti de cette technologie frontale spéciale car elle peut faire des merveilles et transformer dynamiquement la page.
Découvrez notre qui s'accompagne d'une formation en direct animée par un instructeur et d'une expérience de projet réelle. Cette formation vous permet de maîtriser les compétences nécessaires pour travailler avec les technologies Web back-end et front-end. Il comprend une formation sur le développement Web, jQuery, Angular, NodeJS, ExpressJS et MongoDB.
Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires du blog «Image de fond en CSS» et nous vous répondrons.