Comment étirer L'arrière-plan Du Site Web

Table des matières:

Comment étirer L'arrière-plan Du Site Web
Comment étirer L'arrière-plan Du Site Web

Vidéo: Comment étirer L'arrière-plan Du Site Web

Vidéo: Comment étirer L'arrière-plan Du Site Web
Vidéo: Comment supprimer facilement l'arrière-plan d'une image ? | Tuto débutant 2024, Peut
Anonim

Le langage de balisage HTML permet à un concepteur de sites Web d'utiliser n'importe quelle image comme image d'arrière-plan. Cependant, le langage lui-même manque de contrôles intégrés pour les images d'arrière-plan. Un réglage plus fin est effectué à l'aide de feuilles de style CSS en cascade.

Comment étirer l'arrière-plan du site Web
Comment étirer l'arrière-plan du site Web

Instructions

Étape 1

Pour que l'arrière-plan s'étende sur toute la largeur du navigateur, vous devez utiliser le paramètre z-index dans votre CSS. Il vous permet de définir l'ordre des éléments que vous créez. Plus la valeur de cet attribut est élevée, plus le bloc sera placé haut sur la page.

Étape 2

Créez de nouveaux documents au format html et css (bouton droit de la souris - "Nouveau" - "Fichier texte") et ouvrez-les à l'aide de n'importe quel éditeur de texte.

Étape 3

Placez l'image d'arrière-plan sur le calque inférieur. Il s'étirera en fonction de la résolution de l'écran. En haut, un autre élément sera situé sur lequel le contenu de la page sera affiché. Pour ce faire, créez deux blocs. Dans le fichier css, écrivez:.1layer {z-index: 1; largeur: 100 % hauteur: 100 % position: absolue;}. 2layer {Position: absolue; z-index: 2; } Le paramètre position:absolu vous permet de définir un positionnement absolu, c'est-à-dire le calque sera positionné indépendamment des autres éléments.

Étape 4

Incluez le code CSS généré dans le fichier HTML à l'aide de la balise de lien: Arrière-plan de la page

Étape 5

Créez un nouveau calque. Utilisation de la balise

placez-y une image. Par exemple: Contenu de la page Pour img, seul le paramètre width est spécifié, car si vous spécifiez en plus la hauteur, dans certains navigateurs, une distorsion de l'image apparaîtra.

Étape 6

Enregistrez vos modifications. Pour tester votre code, agrandissez la page dans la fenêtre de votre navigateur. L'image de fond doit également être agrandie.

Conseillé: