Comment ajouter des arrière-plans CSS amusants à vos sites

Sep 11, 2025

Comment

[dix] [dix] [dix]

[dix]

L'heure était une page de page Web était une image de carrelage minuscule - et souvent hideuse, agressant des globes oculaires de tous les visiteurs. Aujourd'hui, les origines constituent la base de la conception graphique beaucoup en ligne.

[dix]

Cette révolution dans les antécédents sur le Web a été motivée par des avancées en CSS. Les normes Web offrent désormais beaucoup plus de contrôle, vous permettant ainsi de définir soigneusement la position d'arrière-plan, de travailler avec des gradients et d'ajouter plusieurs arrière-plans à un seul élément.

Couvrant tout dans cette zone nécessiterait un livre, et nous avons donc choisi certains points de départ importants pour vous faire aller et que le lien étrange choix pour vous explorer davantage. Profitez!

Ajouter des arrière-plans CSS aux éléments de la page Web

Les arrière-plans CSS nécessitent le Contexte propriété abrégée, ou l'utilisation de propriétés plus spécifiques, telles que (mais non limitée): Couleur de l'arrière plan ; image de fond ; position de fond ; arrière-plan ; Répétition du fond ; et pièce de fond-attachement . Ceux-ci peuvent être définis pour l'arrière-plan de la page Web (à travers le corps Sélecteur) ou éléments de page tels que les en-têtes, divs, etc.

Au niveau le plus basique, vous pouvez utiliser Contexte Pour transformer une page rouge:

[dix]

 Corps {
 Contexte: rouge;
 }

Aller un peu plus avancé, vous pouvez ajouter une image centrée horizontalement, 20px du haut de son conteneur, non répétée et fixée en place lorsque la page Web défilte:

 Corps {
 Fond: URL (image.png) Centre 20PX NO-REPEAT Fixe;
 }

An image as a background (note: avoid this low level of contrast in your own designs) — Une image comme arrière-plan (note: éviter ce faible niveau de contraste dans vos propres conceptions)

Si vous vouliez écrire ça sans utiliser Contexte sténographie, ça ressemblerait à ceci:

 Corps {
 image-image: url (image.png);
 Contexte de fond: Centre 20px;
 Contexte - Répéter: Non-répéter;
 fond-fixation: fixe;
 }

Si vous souhaitez ajouter plusieurs arrière-plans à un élément, vous pouvez effectuer des ensembles de valeur distinctes dans la déclaration CSS. Notez que quel objet est spécifié d'abord est en haut de la pile, ce qui signifie qu'il sera affiché «au-dessus» d'autres arrière-plans.

 Corps {
 Fond: URL (image.png) Centre 20PX NO-REPEAT Fixe, URL (image-2.png) Centre central NON-REPEAT Fixe;
 }

Dans ce cas, une image apparaît selon l'exemple précédent et celle de «ci-dessous» directement au centre de la zone de contenu.

Redimensionner des images de fond

Jusqu'à présent, nous avons évité arrière-plan . Mais celui-ci est assez important, car il vous permet de contrôler la taille d'une image d'arrière-plan. Spécifiquement, vous pouvez définir les dimensions horizontales et verticales d'une image en pixels ou en pourcentage, tels que:

 Taille de l'arrière-plan: 200px 50px;

Il existe également deux valeurs de mots-clés, qui peuvent être utilisées à la place: contenir et couvrir . Celles-ci sont largement similaires, pour fournir un moyen d'accabler une image dans la zone de contenu d'un élément. La différence est que contenir est conçu pour rendre une image aussi grande que possible, tout en affichant tout cela dans la zone de contenu (ce qui signifie que vous obtenez généralement des lacunes autour de lui), tandis que couvrir Couvre complètement la zone de contenu, mais peut entraîner une partie de l'image qui n'est pas visible. Ce dernier est couramment utilisé sur des sites qui utilisent des photographies comme des arrière-plans.

CSS ‘contain’ (top) versus ‘cover’ (bottom) values — CSS 'contient' (haut) Versus 'Cover' (Bas) Valeurs

Notez que vous pouvez ajouter arrière-plan à un Contexte Définition sténographique - Placez-le après le position de fond valeurs, avec une barre oblique séparant les deux:

 Contexte: URL (image.png) Centre 20px / contient non-répéter fixe

Utilisez des images de fond de retina haute résolution

Lors de l'ajout d'arrière-plans de rétine élevés, arrière-plan est également utile pour obliger de telles images à apparaître à la bonne taille.

Pour un exemple, imaginez un diviser avec un identifiant de logo . Ceci, convenablement, a un logo appliqué comme fond dans CSS. Il s'agit de 150 pixels carrés, et donc le CSS de base que vous utiliseriez est:

[dix]

 #Logo {
 largeur: 150px;
 Hauteur: 150px;
 Contexte: URL (logo.png) non répétée;
 }

Haut résolution complique les choses. Nous ne voulons pas forcer le matériel plus ancien pour charger des images plus grandes. Une requête de support doit donc être utilisée pour charger le logo de résolution supérieure uniquement sur le matériel pris en charge.

 @Media (-webkit-min-dispositif-Device-Pixel-Ratio: 2),
 (Résolution mineure: 192DPI) {
  #logo {
   arrière-plan-image: URL ([email protected]);
  }
 }

Le problème est maintenant l'image haute résolution @ 2x est de 300 pixels carrés (puisqu'il dispose de deux fois la résolution de l'original), mais utilisée comme arrière-plan pour un conteneur carré de 150 pixels. Donc, à ce stade, vous ne voyez qu'un quart de celui-ci.

A high-res image before a resize fix — Une image haute résolution avant une solution de redimensionnement

Ceci est corrigé en attribuant un spécifique arrière-plan la valeur pour #logo :

 #Logo {
 largeur: 150px;
 Hauteur: 150px;
 Contexte: URL (logo.png) non répétée;
 Fond-taille: 150px 150px;
 }

[dix] [dix]

Le logo haute résolution, maintenant confortable à l'intérieur de son conteneur

Une méthode plus moderne de travail avec de multiples résolutions de contexte et la réalisation du même résultat est CSS4 série d'images :

 #Logo {
 arrière-plan-image: ensemble d'images (
  URL (logo.png) 1x,
  URL ([email protected]) 2x
  );
 }

Les avantages de série d'images sont plus simples CSS et l'agent utilisateur déterminant l'image qui doit être utilisée. L'inconvénient est le support du navigateur - au moment de la rédaction - reste incomplète. Visitez cette page de test Pour un moyen rapide de vérifier comment les navigateurs vous supportez le tarif. (C'est peut-être pourquoi de nombreux designers Utilisez des scripts pour automatiser des images haute résolution .)

Travailler avec des canaux alpha et des gradients

Notre principale astuce dans ce flamboyant rapide (dans les termes du didacticiel de site Web) concerne les canaux alpha et les gradients. Lorsque Internet était alimenté à la vapeur, vous aviez souvent des concepteurs utilisent des gifs de «damier» pour simuler des canaux alpha (tous les autres pixels étaient transparents). Maintenant, vous venez d'attribuer des couleurs à RGBA:

 Main {
 Contexte: RGBA (255.255 25555,7);
 }

Dans l'exemple ci-dessus, le fond serait de 70% de blanc, ce qui permet à ce qui est sous sa position de montrer. Vous devez faire attention à conserver la clarté lors de l'utilisation d'arrière-plans semi-transparents qui sont au-dessus des images complexes, mais ils peuvent être parfaits pour ajouter un intérêt visuel aux pages Web.

Alpha channels, gradients, and some questionable colour choices — Canaux alpha, gradients et certains choix de couleurs douteux

De même, les concepteurs Web utilisés pour générer et les gifs de carreaux s'ils souhaitaient un gradient comme un arrière-plan, mais ce n'est plus nécessaire non plus, à moins que vous ne souhaitiez faire la fête comme en 1999. Ces jours-ci, vous aurez envie de CSS3. gradient linéaire et dégradé radial Propriétés, pour lesquelles vous définissez des directions et des arrêts de couleur.

Voici une règle CSS avec un gradient de base:

 H1 {
 Contexte: dégradé linéaire (à droite, RGBA (255 255 255,1), RGBA (255 255 2555,0));
}

Cela serait appliqué aux en-têtes de niveau-un, en leur donnant un gradient linéaire qui va de gauche à droite, en commençant par un blanc solide et se terminant par blanc transparent.

Utiliser des angles et des arrêts de couleurs multiples, vous pouvez aller beaucoup plus loin avec des gradients. Expérimenter, essayez d'utiliser une photoshop - comme Générateur de gradient CSS et examiner la sortie du code (étant conscient de l'exemple lié ajoute la syntaxe des navigateurs plus âgés - juste attraper le gradient linéaire ligne pour votre propre usage).

As the CSS Patterns Gallery shows, you can do really fancy things with CSS gradients — Comme le montre la galerie de modèles CSS, vous pouvez faire des choses vraiment fantaisistes avec des gradients CSS

Si vous avez envie de vérifier ce que les professionnels de la navigation peuvent faire avec des dégradés et arrière-plan , Découvrez lea Verou Galerie de motifs CSS3 . Vous trouverez des charges d'exemples en direct qui utilisent des gradients CSS pour créer toutes sortes de modèles de fond gravement impressionnants.

Et oui, il y a un soupçon d'où nous sommes entrés en ce qui concerne les agressions globales dans certaines d'entre elles.Mais comme pour tout ce qui concerne les arrière-plans Web, la clé consiste à vous assurer que vous ajoutez est pertinente dans le contexte de votre conception et - surtout - que les arrière-plans ne distraient pas du contenu, ni de le rendre illisible.

Liens connexes:

Un guide pour écrire mieux CSS
Créer une mise en page réactive avec la grille CSS
Astuces CSS pour révolutionner vos mises en page

[dix] [dix]

[dix]

Comment ajouter des arrière-plans CSS amusants à vos sites

Ajouter des arrière-plans CSS aux éléments de la page Web

Redimensionner des images de fond

Utilisez des images de fond de retina haute résolution

Travailler avec des canaux alpha et des gradients

Comment - Most Popular Articles

21 étapes à la super vitesse JavaScript

Visual development tips: Tell a story with your artwork

Prototypes parfaits et designs de la main avec Marvel

Créer des paysages magnifiques à Houdini

Maîtriser l'outil de couteau

Comment créer un chiffon CG réaliste

Comment faire des lettres 3D dans l'illustrateur

Utiliser des outils vectoriels: approche d'une concepteur Web

Catégories