Comment Mettre Un Fond Sur Votre Page

Table des matières:

Comment Mettre Un Fond Sur Votre Page
Comment Mettre Un Fond Sur Votre Page

Vidéo: Comment Mettre Un Fond Sur Votre Page

Vidéo: Comment Mettre Un Fond Sur Votre Page
Vidéo: Comment ajouter une image de fond dans votre page personnelle de Ma Planète 2024, Décembre
Anonim

Mettre une image de fond sur un site Web est une affaire de cinq minutes. Beaucoup plus de temps est consacré à la préparation de l'image - sélection, réglage, ajout d'effets, composition de plusieurs illustrations dans un seul fichier graphique.

Comment mettre un fond sur votre page
Comment mettre un fond sur votre page

Instructions

Étape 1

L'attribut background est responsable de la gestion de l'arrière-plan. Pour remplir uniformément la page avec une seule couleur, utilisez la balise style dans body:. Le fond sera noir. Si vous utilisez CSS, mettez dans votre tête: body {background-color: # 000000;}

Étape 2

À l'aide d'un lien, une image répétitive est définie. L'adresse est spécifiée sous forme de lien externe ou interne. Lors de l'utilisation de cette méthode, il est important que les joints entre les images restent invisibles, sinon la page aura l'air bâclée. En CSS, utilisez: body {background-color: # 000000; background-image: url (images / pattern.png);}.

Étape 3

La répétition du motif peut être contrôlée. Background-repeat est responsable de cette fonction avec les éléments suivants: - repeat-x - répétition horizontale; - repeat-y - répétition verticale: - repeat - répétition dans les deux sens; - no-repeat - sans répétition. Il est défini comme this: body {background-color: # 000000; image d'arrière-plan: url ("papillon.gif"); background-repeat: pas de répétition; }

Étape 4

La position d'arrière-plan permet de positionner l'image dans la partie souhaitée de la page Web. Les coordonnées peuvent être définies en utilisant le pourcentage (50% 75%), les centimètres (5cm 5cm), l'aspect des pixels (200px 400px), la forme du mot (gauche, droite, haut, centre, bas). Par exemple: body {background-color: # 000000; image d'arrière-plan: url ("papillon.gif"); background-repeat: pas de répétition; pièce jointe d'arrière-plan: fixe; position d'arrière-plan: en bas à gauche; } La valeur 0% 0% est égale en haut à gauche.

Étape 5

La propriété background-attachment spécifie si les images défilent avec la page (background-attachment: scroll) ou non (background-attachment: fixed).

Conseillé: