Comment ajouter un arrière-plan à un site Web : 14 étapes (avec des images)

2024 Auteur: Gilbert Ryder | [email protected]. Dernière modifié: 2024-01-31 09:02

L'arrière-plan est l'un des éléments les plus cruciaux d'un site Web. Un bon arrière-plan crée le ton du site Web et complète le contenu. Il existe de nombreuses façons différentes d'ajouter un arrière-plan, chacune avec un objectif différent. Certaines méthodes vous permettent d'appliquer l'arrière-plan à toutes les pages d'un site Web, tandis que d'autres limitent l'arrière-plan à une seule page. Cet article vous apprend comment ajouter un arrière-plan à votre site Web en utilisant HTML ou CSS.

Pas

Méthode 1 sur 2: Méthodes HTML

Fond de couleur unie

Étape 1. Un arrière-plan de couleur unie est le type d'arrière-plan le plus basique que vous puissiez mettre sur un site Web

En fait, chaque site Web commence par un fond blanc par défaut. Cependant, alors qu'un fond blanc peut être très élégant et propre lorsqu'il est utilisé avec un jeu de couleurs harmonieux, un fond de couleur différente peut être favorisé avec différents thèmes.

Étape 2. Ouvrez votre code Web (source)

Étape 3. Dans la balise body, ajoutez un attribut appelé bgcolor

Maintenant, votre balise corporelle devrait ressembler à ceci-

où COLORNAME est le nom de la couleur. COLORNAME peut être rempli de nombreux types de représentants de couleur-

• (nom de la couleur)
• (valeur hexadécimale)
• (valeur RVB)

Étape 4. Expérimenter avec RVB et # peut conduire à de nombreuses nuances, mais vous pouvez commencer par la facilité

Mais rappelez-vous qu'en tapant une couleur peu commune comme "Ultramarine Blueish Green", vous obtiendrez du blanc.

Ajout d'une image d'arrière-plan

L'ajout d'une image d'arrière-plan est légèrement plus compliqué qu'un arrière-plan de couleur unie

Étape 1. Ajoutez la propriété background à la balise body, elle ressemble donc à ceci-

où SRC est la source de l'image SRC peut se trouver dans le même dossier ou dans un autre dossier/page Web.

• (dans le même dossier)
• (dans un autre dossier)
• (dans une autre page Web)

Étape 2. N'oubliez pas de saisir l'extension.gif/-j.webp" />

Méthode 2 sur 2: Méthodes CSS

Fond de couleur unie

Étape 1. Pour ajouter un arrière-plan de couleur unie en CSS, ajoutez un attribut de style

Vous pouvez également donner des ID et des classes et utiliser des feuilles de style externes et internes.

Étape 2. Votre balise corporelle devrait ressembler à ceci-

où COLORNAME est le nom de la couleur, la valeur hexadécimale ou RVB (Rappelez-vous également les dernières étapes de l'arrière-plan de couleur unie en HTML, elles sont également applicables ici).

Ajout d'une image

Étape 1. Pour ajouter une image, ajoutez l'attribut style à la balise body

Vous pouvez également donner des ID et des classes et utiliser des feuilles de style externes et internes.

Étape 2. Votre balise corporelle devrait maintenant ressembler à ceci-

Étape 3. N'oubliez pas que SRC est la source

Il peut provenir du même dossier, d'un dossier différent ou d'une page Web différente.

• (dans le même dossier)
• (dans un autre dossier)
• (dans une autre page Web).

Étape 4. N'oubliez pas d'ajouter également les extensions

Répétition de fond à motifs

Étape 1. Pour créer un arrière-plan à motif répété, ajoutez un arrière-plan comme indiqué dans les étapes ci-dessus

Votre balise corporelle doit maintenant être changée en-

Où REPEAT-SETTINGS sont les paramètres. Il peut y avoir de nombreux paramètres de répétition, comme-

• (L'arrière-plan se répétera à la fois verticalement et horizontalement.)
• (L'arrière-plan se répétera horizontalement.)
• (L'arrière-plan se répétera verticalement.)

Fond d'image fixe

Étape 1. Les arrière-plans d'images fixes ont l'air cool et ne changent pas lorsque vous faites défiler vers le bas

Pour les faire, il vous suffit d'apporter quelques modifications simples au code dans la section ci-dessus. Faites les ajustements pour que l'étiquette du corps ressemble à ceci-

où SRC est la source de l'image d'arrière-plan, POSITION est la position de l'image (elle peut aller du centre au haut à droite); background-attachment est le principal "catalyseur" de ce type de fond. Il est utilisé pour indiquer la position de l'arrière-plan et il est recommandé de ne pas le modifier.