Fond - Astuces CSS | CSS Almanach 2025

La backgroundpropriété en CSS vous permet de contrôler l'arrière-plan de n'importe quel élément (ce qui peint sous le contenu de cet élément). C'est une propriété abrégée, ce qui signifie qu'elle vous permet d'écrire ce que seraient plusieurs propriétés CSS en une seule. Comme ça:

body ( background: url(sweettexture.jpg.webp) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ red; /* color */ )

background se compose de huit autres propriétés:

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color

Vous pouvez utiliser n'importe quelle combinaison de ces propriétés que vous aimez, dans presque n'importe quel ordre (bien que l'ordre recommandé dans la spécification soit ci-dessus). Il y a cependant un piège: tout ce que vous ne spécifiez pas dans la backgroundpropriété est automatiquement défini sur sa valeur par défaut. Donc, si vous faites quelque chose comme ça:

body ( background-color: red; background: url(sweettexture.jpg.webp); )

L'arrière-plan sera transparent au lieu de rouge. Le correctif est cependant simple: définissez simplement background-coloraprès background, ou utilisez simplement le raccourci (par exemple background: url(… ) red;)

Arrière-plans multiples

CSS3 a ajouté la prise en charge de plusieurs arrière-plans, qui se superposent les uns aux autres. Toute propriété liée aux arrière-plans peut prendre une liste séparée par des virgules, comme ceci:

body ( background: url(sweettexture.jpg.webp), url(texture2.jpg.webp) black; background-repeat: repeat-x, no-repeat; )

Chaque valeur de la liste séparée par des virgules correspond à un calque: la première valeur est le calque supérieur, la deuxième valeur est le deuxième calque et la couleur d'arrière-plan est toujours le dernier calque.

Recettes

Voir le Pen emBzRd de Timothy Miller (@tjacobdesign) sur CodePen.

Prise en charge du navigateur

La prise en charge varie selon les différentes propriétés spécifiques, et chaque article correspondant de l'Almanach a des notes de support de navigateur uniques. Cependant, les arrière-plans monochromes de base et les images uniques fonctionnent partout, et tout ce qui n'est pas pris en charge revient à la meilleure chose suivante, qu'il s'agisse d'une image ou d'une couleur.