Comment définir l'image d'arrière-plan d'une page Web en HTML

Aujourd'hui, je vais vous expliquer comment définir l'image d'arrière-plan d'une page Web en HTML. Nous utilisons la réflexion sur la mise en page de l'ensemble de la page Web pour voir quelles méthodes peuvent être définies et quelles sont les différences entre chaque méthode. Et des conseils pour définir les images d'arrière-plan

Arrière-plan d'une seule couleur des pages Web

Si vous avez un arrière-plan de page Web en couleur pure, il vous suffit de définir la arrière-plancouleur d'arrière-plan pour the body

body{background:#FFF}

Définir l'arrière-plan de la page Web sur blanc

body{background:#FFF url(bg.gif) répéter- x 0}

Définissez-le comme ceci Cette image est une image d'arrière-plan disposée horizontalement en haut de la page Web. Ici, faites attention à définir le chemin de l'image importée. selon le chemin de votre image.

2. Image d'arrière-plan de la tuile horizontale

Par exemple, la version 2014 de la page Web a le même principe que la tuile dégradée : elle découpe également une bande verticale et l'utilise comme arrière-plan du corps. placez-le en mosaïque horizontalement pour qu'il devienne plein écran. L'arrière-plan de la page Web est plein.

Le code est le même que le premier, seules les images sont différentes. Définissez l’image d’arrière-plan pour qu’elle soit carrelée horizontalement sur le corps.

Grande image irrégulière

Nous voyons souvent des pages Web thématiques ou d'images avec une très grande image en arrière-plan, et généralement les moniteurs à écran large et à écran étroit peuvent afficher une image d'arrière-plan en plein écran, tout comme l'image peut s'adapter à la largeur et à la taille. En fait, cette implémentation est très simple. Faites en sorte que la largeur et la conception artistique de cette image soient suffisamment grandes. Par exemple, la largeur de la résolution d'écran la plus large du marché est de 2 560 pixels. cette page Web, elle peut remplir tout l'écran. Ensuite, vous L'image d'arrière-plan doit être réalisée avec une largeur supérieure ou égale à 2560px De cette façon, la page Web peut remplir tout l'écran lorsqu'elle est ouverte sur des moniteurs à écran large ou à écran étroit. L'image d'arrière-plan peut être ouverte en plein écran lors de la réduction, de l'agrandissement ou de la modification de la fenêtre du navigateur. Celle centrée ressemble à l'image d'arrière-plan qui se redimensionne de manière adaptative.

La clé : La clé d'une image d'arrière-plan adaptative plein écran est de rendre l'image suffisamment large pour qu'elle puisse remplir l'écran à la résolution la plus large, et des résolutions encore plus petites la rempliront naturellement. Dans le même temps, vous devez définir l'image d'arrière-plan comme celle-ci comme arrière-plan du corps et doit être centrée.

Si cette image d'arrière-plan est : bg.jpg

Définissez le code CSS :

body{background: url(bg.jpg) no-repeat center 0}

Explication du code : définissez cette image comme arrière-plan de la page Web, généralement non carrelé (pas de répétition), centré horizontalement, affiché en haut

La hauteur de l'image d'arrière-plan de la tête et du contenu de l'image d'arrière-plan du bas peut être augmentée ou diminuée. L'arrière-plan de la tête et du bas reste inchangé

<. 🎜>Voici deux en-têtes courants. Différentes techniques d'image d'arrière-plan en haut et en bas pour définir la méthode de mise en page.

Cette méthode définit directement l'image d'arrière-plan de la tête sur l'arrière-plan du corps à afficher au centre et en haut, et la zone de droit d'auteur inférieure DIV définit la largeur à 100 % en même temps, définissez cette image d'arrière-plan ou ; couleur de fond.

body{background: url(bg.jpg) no-repeat center 0} 
#footer{margin:0 auto;width:100%;background: url(ft-bg.jpg) no-repeat center 0}

De cette façon, le fond de la tête et du bas peut être différent sans être affecté par la hauteur du contenu.

L'image d'arrière-plan du bas dépasse de loin la hauteur de la zone inférieure protégée par le droit d'auteur.

Une telle structure a des images différentes en haut et en bas, de sorte qu'elle n'affecte pas la disposition de l'arrière-plan à mesure que le contenu central augmente. Cela peut généralement être obtenu en définissant l'arrière-plan de la balise

html <. 🎜> et le corps. Si l'image d'arrière-plan bleu foncé du haut est "top.jpg" et l'image d'arrière-plan bleu clair du bas est "foot.jpg"

DIV CSS définit le code CSS clé pour l'arrière-plan de la page Web :

Explication : définissez l'image d'arrière-plan bleu foncé comme arrière-plan HTML pour qu'elle soit centrée horizontalement et en haut ; définissez l'image d'arrière-plan bleu clair pour qu'elle soit l'image d'arrière-plan du corps horizontalement centrée et inférieure.

html{background: url(top.jpg) no-repeat center 0} 
body{background: url(foot.jpg) no-repeat center bottom}

Ce qui précède est un résumé de plusieurs paramètres courants de mise en page d'arrière-plan de page Web. Des paramètres flexibles peuvent définir l'arrière-plan du corps, du HTML et du div pour obtenir l'effet d'arrière-plan souhaité si le div est défini sur l'arrière-plan de. cette page Web, puis la hauteur de ce DIV Il ne peut pas être défini (la valeur par défaut est automatique) et la largeur du div peut être définie à 100 %.

C'est tout pour définir l'image d'arrière-plan de la page Web. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment définir la couleur de la police en HTML

Comment saisir des caractères d'espacement en HTML

Pourquoi devez-vous définir des styles CSS sur DIV ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!