Il existe plusieurs façons de gérer les fonds en CSS :
En utilisant ces propriétés, vous pouvez contrôler de nombreux aspects de l'apparence des fonds en CSS.
La propriété CSS "background-color" définit la couleur de fond pour un élément. Il peut être utilisé pour définir une couleur unique pour le fond d'un élément.
background-color: yellow;
background-color: rgb(255, 255, 0);
background-color: rgba(255, 255, 0, 0.5); /* la couleur est définie avec 50% d'opacité */
background-color: hsl(60, 100%, 50%);
background-color: #FFFF00;
La propriété CSS "background-image" définit une image de fond pour un élément. Il peut être utilisé pour définir une image unique ou plusieurs images pour le fond d'un élément.
`background-image: url(chemin/vers/image.jpg);`
Il est également possible de contrôler la répétition de l'image de fond à l'aide de la propriété "background-repeat", comme ceci :
background-repeat: repeat-x; /* l'image est répétée horizontalement */
background-repeat: repeat-y; /* l'image est répétée verticalement */
background-repeat: repeat; /* l'image est répétée à la fois horizontalement et verticalement */
background-repeat: no-repeat; /* l'image n'est pas répétée */
La propriété CSS "background-position" définit la position de l'image de fond par rapport à l'élément. Il peut être utilisé pour contrôler où l'image de fond sera placée par rapport à l'élément.
`background-position: 10px 20px; /* l'image sera décalée de 10 pixels vers la droite et 20 pixels vers le bas */`
`background-position: 50% 50%; /* l'image sera centrée */`
`background-position: 50% 10px; /* l'image sera centrée horizontalement et décalée de 10 pixels vers le bas */`
background-position: top left; /* l'image sera placée en haut à gauche */
background-position: bottom right; /* l'image sera placée en bas à droite */
background-position: center; /* l'image sera centrée *//
La propriété CSS "background-size" définit la taille d'une image de fond pour un élément. Il peut être utilisé pour définir la largeur et la hauteur de l'image de fond, soit en pixels, soit en pourcentage, soit en utilisant des mots-clés.
background-size: 500px 300px;
background-size: 80% 60%;
background-size: cover; /* l'image de fond remplit complètement l'élément */
background-size: contain; /* l'image de fond est entièrement visible à l'intérieur de l'élément */`
background-size: 80% auto; /* la largeur est définie à 80% et la hauteur est définie automatiquement pour maintenir les proportions */`