Dans HTML, les images d'arrière-plan sont utilisées pour styliser et améliorer l'apparence des pages Web. Par défaut, les images de la page Web sont affichées dans le coin supérieur gauche de l'écran. Cependant, vous pouvez redimensionner l'image en mode plein écran. CSS fournit «position de fond" et "taille de l'arrière-plan»Propriétés qui peuvent être utilisées pour forcer une image à s'afficher sur tout l'écran.

Dans ce manuel, vous apprendrez la méthode d'ajout d'une image d'arrière-plan en mode plein écran.

Commençons!

Comment créer une image d'arrière-plan en plein écran à l'aide de CSS?

Pour faire l'arrière-plan complet à l'aide de CSS, créez d'abord une div et ajustez sa largeur et sa hauteur et sa marge pour le faire apparaître sur le plein écran en utilisant le "largeur","hauteur", et "marge»Propriétés de CSS. Ensuite, ajoutez une bordure autour de lui en utilisant le «frontière" propriété. Pour régler la frontière en fonction de l'écran, utilisez le «dimensionnement en boîte" propriété. Une fois terminé, nous utiliserons la propriété de «arrière-plan"Pour ajouter l'image en arrière-plan.

La syntaxe de la propriété d'arrière-plan est:

Contexte: Backgrack-Image (URL) Background-Repeat Backgrack Position / Background-Size

Dans la syntaxe de mention ci-dessus, les quatre propriétés suivantes de la propriété d'arrière-plan sont mentionnées:

• image de fond: Il est utilisé pour ajouter une image comme arrière-plan.
• Répétition du fond: Il est utilisé pour définir le motif de la répétition de l'image d'arrière-plan, comme le non-répétition, répéter horizontalement et répéter verticalement.
• Position d'arrière-plan: Il est utilisé pour ajuster la position de l'image, comme le centre, la gauche et la droite.
• taille arrière: Il est utilisé pour définir la taille de l'image, comme l'auto, la couverture et la longueur.

Passons à l'exemple dans lequel nous ferons une image d'arrière-plan en plein écran en utilisant CSS.

Exemple

Dans le HTML, nous créerons un conteneur et définirons son nom de classe comme «div»Et ajoutez le cap en utilisant le

étiqueter. De plus, pour placer le cap au centre de la page, nous utiliserons la balise.

Html

Bienvenue à Linuxhint

Ensuite, attribuez la valeur de la propriété de marge comme «0"Et la hauteur comme"100px«À tout le corps du HTML.

CSS

html, corps
marge: 0;
hauteur: 100%;

Dans l'étape suivante, style le conteneur créé en utilisant «div»Et ajustez la largeur et la hauteur de la div comme«100px". Nous utiliserons la propriété des frontières pour ajouter la bordure autour de la div avec «25px"Largeur, style comme"rainure"Et la couleur de la frontière comme"RVB (184, 147, 147)»:

div
Largeur: 100%;
hauteur: 100%;
Border: 25px Groove RGB (184, 147, 147);

Le résultat du code susmentionné est donné ci-dessous. Vous pouvez voir que le titre et la bordure sont créés:

Note: Comme vous pouvez le voir, dans la bordure d'image ci-dessus de la droite et du bas est cachée, c'est parce que la largeur et la hauteur de la div sont déjà «100%", Donc lorsque nous ajouterons une bordure, une largeur et une hauteur supplémentaires seront ajoutées. Pour éviter cela, nous utiliserons le «dimensionnement en boîte”Propriété de CSS car elle nous permet d'inclure une bordure de la largeur et de la hauteur de l'élément.

Pour ce faire, nous définirons la valeur de la taille d'une boîte comme «borne«Pour inclure la frontière dans la largeur et la hauteur totales de la div:

Dimensionnement en boîte: Border-Box;

L'image dirigée ci-dessous indique que la bordure est placée avec succès dans la largeur et la hauteur de la div:

Maintenant, nous allons ajouter l'image d'arrière-plan en utilisant le «image de fond«Propriété et spécifiez l'URL de l'image comme«URL (image.jpg)»:

div
Contexte: URL ("Image.jpg ");

Dans l'image ci-dessous, vous pouvez voir que l'image d'arrière-plan est ajoutée avec succès, mais elle est répétitive:

Pour éviter la répétition de l'image, le «Répétition du fond»La propriété est utilisée. Ici, nous allons définir la valeur de la répétition d'arrière-plan comme «sans répétition»:

div
Image en arrière-plan: URL ("Image.jpg ");
République de fond: sans répétition;

Dans la sortie ci-dessous, vous pouvez voir que la répétition de l'image est arrêtée; Cependant, l'image ne s'affiche pas à l'écran:

Pour afficher l'image en plein écran, nous utiliserons le «taille de l'arrière-plan" propriété. Et définir sa valeur comme «couverture», Ce qui signifie que l'image couvrira toute la zone du conteneur créé:

div
Image en arrière-plan: URL ("Image.jpg ");
République de fond: sans répétition;
taille arrière: couverture;

L'image ci-dessous indique que l'image est affichée sur le plein écran et est coupée. En effet, la taille de l'image est supérieure à la taille du div:

Pour résoudre ce problème, utilisez le «position de fond«Propriété et définissez la position de l'image comme«centre»:

div
Image en arrière-plan: URL ("Image.jpg ");
République de fond: sans répétition;
taille arrière: couverture;
Position d'arrière-plan: Centre;

En conséquence, l'image sélectionnée sera affichée en mode plein écran:

C'est ça! Nous avons expliqué la méthode pour créer une image d'arrière-plan en plein écran en utilisant CSS.

Conclusion

Pour créer une image d'arrière-plan complète en utilisant CSS, créez d'abord une div et définissez la largeur, la hauteur et les marges pour remplir l'écran. Après cela, créez une bordure autour du div, puis ajoutez-y une image en utilisant le «image de fond" propriété. Pour ajuster l'image en fonction du plein écran, utilisez le "Répétition du fond","taille de l'arrière-plan", et "position de fond" propriétés. Cet article a expliqué la méthode complète pour créer l'image d'arrière-plan en plein écran en utilisant CSS.