DANS Images HTML inséré à l'aide d'une balise img.
Étiqueter img- vide, il contient des attributs et n'a pas de balise fermante.

L'attribut est utilisé pour afficher une image sur la page src. SRC vient de la source, ce qui signifie Source. La valeur de l'attribut src est URL Images.

La ligne ci-dessus signifie que l'image se trouve dans le même répertoire (dossier) que le fichier HTML lui-même qui renvoie à cette image. Disons que vous avez un dossier HTML, qui contient index.html avec le code ci-dessus et l'image elle-même avec le titre image.jpg.

Dans ce cas, lors de l'ouverture index.html Vous verrez cette image dans votre navigateur. Si vous l'avez ailleurs (un dossier supérieur ou inférieur), vous verrez alors soit un champ blanc, soit un petit rectangle avec une croix rouge (l'image n'a pas pu être chargée).

Les images ne se trouvent pas toujours dans le même répertoire (dossier) que le fichier lui-même, c'est pourquoi la spécification des chemins sera décrite plus précisément un peu plus tard.

Attributs de la balise img

En plus de src balise img Il existe d'autres attributs responsables de la taille de l'image affichée, de sa légende, etc.

src- adresse de l'image
largeur- Largeur de l'image
hauteur- hauteur de l'image
titre- signature qui apparaît lorsque vous survolez l'image
alt- Texte alternatif. Nécessaire pour robot de recherche et indexation d'images
frontière- épaisseur de la bordure de l'image. 0 - pas de bordure, 1 - bordure la plus fine, etc.

Adresse de l'image insérée (exemples)

Généralement, Images ne sont pas stockés dans le même dossier que les fichier HTML. A cet effet, un dossier est créé dans le même répertoire images(ou img, selon le goût et la couleur). Et toutes les images nécessaires y sont déjà placées. Dans le cas d'un stockage séparé, vous devrez spécifier une adresse différente pour l'attribut src

Si le fichier se trouve dans le dossier ci-dessus, alors

Vous pouvez également insérer une image provenant d'un autre site, sans la télécharger dans votre dossier. Pour ce faire, vous devez disposer d'une connexion Internet stable et approximativement du code suivant, dans lequel vous saisissez l'adresse de l'image sur Internet dans l'adresse :

Image d'arrière-plan en HTML

Comme image de fond des fichiers avec des extensions peuvent apparaître gif, jpg, jpeg Et png. Si la taille de l'image est plus petite que la fenêtre du navigateur, l'image continuera automatiquement à remplir l'arrière-plan restant. DANS corps utiliser l'attribut arrière-plan, dans lequel on précise le chemin d'accès à l'image

Vlad Merjevitch

En raison des particularités des pages Web, les images d'arrière-plan jouent un rôle important dans la mise en page des documents du site. Dans le même temps, ils participent activement à diverses choses, par exemple en automatisant le processus d'attachement d'images au texte, en créant des transitions dégradées et, bien sûr, en ajoutant un arrière-plan sous le contenu. Vous trouverez ci-dessous quelques aspects de l'utilisation des images d'arrière-plan.

Contexte sur une page Web

La définition d'une image d'arrière-plan sur une page Web s'effectue traditionnellement via l'attribut background de la balise. . Ce motif est répété horizontalement et verticalement, remplissant ainsi toute la fenêtre du navigateur. Il est clair que options spéciales Il n'y a pas de place pour la créativité ici, alors tournons-nous vers les styles et voyons ce que vous pouvez faire avec CSS.

CSS possède cinq attributs qui contrôlent l'image d'arrière-plan : son ajout, sa position et sa répétition. Cependant, tous ces paramètres sont remplacés par une propriété universelle, background , que nous utiliserons à l'avenir.

Ajouter un fond d'écran

L'ajout d'une image s'effectue en définissant l'adresse de l'image à l'aide du mot-clé url. Pour contrôler la répétition d'une image, les arguments no-repeat, répétition-x (répéter horizontalement) et répéter-y (répéter verticalement) sont utilisés. Grâce à cela, vous pouvez obtenir la page Web illustrée à la Fig. 1.

Pour définir une image sur une page Web, vous devez ajouter une propriété de style d'arrière-plan au sélecteur BODY, comme indiqué dans l'exemple 1.

Exemple 1 : Image d'arrière-plan

DANS dans cet exemple dessin graphique target.gif est défini comme l'arrière-plan d'une page Web sans répéter l'image. Pour éviter que l'image ne s'ajuste étroitement aux bords du navigateur, elle est décalée de 30 pixels vers la droite et de 20 pixels vers le bas par rapport à sa position d'origine.

Répéter un motif

Étant donné que vous pouvez définir le motif d’arrière-plan pour qu’il se répète horizontalement ou verticalement, plusieurs options sont disponibles pour la conception des pages Web. Par exemple, pour créer bande verticale le long du bord gauche (Fig. 2), vous aurez besoin de l'image montrée sur la Fig. 3.

Le motif doit être tel qu'il s'emboîte verticalement sans coutures visibles et forme également un tout avec couleur spécifiée arrière-plan de la page Web. L'exemple 2 montre comment créer une telle image d'arrière-plan, toujours en utilisant la propriété background et sa valeur de répétition.

Exemple 2. Répéter l'arrière-plan verticalement

De même, vous pouvez répéter l'arrière-plan horizontalement, par exemple en créant un dégradé et en le définissant comme image d'arrière-plan (Fig. 4).

Pour obtenir la page Web illustrée à la Fig. 4, vous devrez d’abord créer une image avec une transition dégradée. La largeur suffit pour spécifier 20 à 40 pixels, et la hauteur de l'image dépend du but du document et de la hauteur attendue du contenu de la page Web. Il ne faut pas non plus oublier que le dessin grande taille entraînera une augmentation de la taille du fichier graphique. Et cela affectera négativement sa vitesse de chargement et, à terme, entraînera un affichage en arrière-plan plus lent. Dans ce cas, une image de 30x200 pixels convenait tout à fait (Fig. 5).

L'exemple 3 montre le code HTML pour créer un arrière-plan dégradé.

Exemple 3 : répétition d'arrière-plan horizontale

Un design dégradé se marie bien avec un bloc de couleur unie, c'est pourquoi dans cet exemple, nous ajoutons un calque pour afficher le contenu de la page Web.

Ajouter une image au texte

En utilisant une image d'arrière-plan, vous pouvez automatiser le processus d'ajout de graphiques à un texte spécifique, tel que des titres. Pour ce faire, utilisez la propriété universelle background, qui est appliquée au sélecteur souhaité. La valeur est le chemin d'accès à l'image et, pour qu'elle ne se répète pas, l'argument de non-répétition (exemple 4).

Exemple 4 : Ajouter une image

Titre

Texte principal

Comme le montre cet exemple, l'image peut être décalée horizontalement et verticalement par rapport à son position de départ, par défaut c'est le coin supérieur gauche élément de bloc. Le décalage d'arrière-plan permet de positionner l'image par rapport au texte de la manière souhaitée. Pour éviter que le texte ne chevauche l'image, vous devez ajouter la propriété padding-left, grâce à laquelle le texte est décalé vers la droite de la distance spécifiée. Elle est individuelle dans chaque cas et est généralement égale à la largeur de l'image plus l'espace souhaité entre l'image et le texte.

De nombreux concepteurs de mise en page novices, se plongeant simplement dans l'essence de la création de sites Web, se demandent souvent comment faire de l'arrière-plan une image en HTML. Et même si certaines personnes parviennent à comprendre cette tâche, des problèmes surviennent toujours lors de l'étirement de l'image sur toute la largeur du moniteur. Dans le même temps, j'aimerais que le site s'affiche de la même manière sur tous les navigateurs, donc l'exigence multi-navigateurs doit être remplie. Vous pouvez définir l'arrière-plan de deux manières : en utilisant le style CSS. Chacun choisit le plus pour lui-même Meilleure option. Certainement, Style CSS beaucoup plus pratique, car son code est stocké dans fichier séparé et n'occupe pas de colonnes supplémentaires dans les balises principales du site, mais nous considérerons d'abord une méthode simple pour installer une image sur l'arrière-plan du site.

Balises HTML de base pour créer un arrière-plan

Passons donc à la question, le fond en html sur tout l'écran. Pour que le site soit beau, vous devez comprendre un détail assez important : il suffit de créer un fond dégradé ou de le peindre avec une couleur unie, mais si vous devez insérer une image dans l'arrière-plan, elle ne s'étirera pas sur toute la largeur du moniteur. Dans un premier temps, vous devez sélectionner une image ou créer vous-même un design avec l'extension dans laquelle la page de votre site sera affichée. Seulement après image de fond terminé, déplacez-le vers un dossier appelé « Images ». Nous y stockerons toutes les images, animations et autres utilisées fichiers graphiques. Ce dossier doit se trouver dans le répertoire racine de tous vos fichiers HTML. Vous pouvez maintenant passer au code. Il existe plusieurs options pour écrire du code qui changera l'arrière-plan en image.

1. Écrire l'attribut de balise.
2. Grâce au style CSS dans le code HTML.
3. Écrivez le style CSS dans un fichier séparé.

Comment faire de l'arrière-plan une image en HTML dépend de vous, mais je voudrais dire quelques mots sur la façon dont cela serait le plus optimal. La première méthode, utilisant l’écriture via un attribut de balise, est obsolète depuis longtemps. La deuxième option est utilisée dans de très rares cas, uniquement parce qu'une grande partie du même code est obtenue. Et la troisième option est la plus courante et la plus efficace. Ici Exemples HTML Mots clés:

1. La première façon d'écrire consiste à utiliser l'attribut de balise (corps) dans le fichier index.htm. Il est écrit sous la forme suivante : (body background= "Folder_name/Image_name.extension") (/body). Autrement dit, si nous avons une image appelée « Image » et Extension JPG, et nous avons nommé le dossier « Images », alors l'entrée de code HTML ressemblera à ceci : (body background="Images/Picture.jpg")… (/body).
2. La deuxième méthode d'enregistrement affecte le style CSS, mais est écrite dans le même fichier appelé index.htm. (body style="background: url("../Images/Picture.jpg")").
3. Et la troisième méthode d'enregistrement se fait en deux fichiers. Dans un document appelé index.htm, la ligne suivante est écrite : (head)(link rel="stylesheet" type="text/css" href="Path_to_CSS_file")(/head). Et dans le fichier de style appelé style.css nous écrivons déjà : body (background : url(Images/Picture.jpg")).

Nous avons expliqué comment créer une image d'arrière-plan en HTML. Vous devez maintenant comprendre comment étirer l'image sur toute la largeur de l'écran.

Façons d'étirer une image d'arrière-plan à la largeur de la fenêtre

Imaginons notre écran sous forme de pourcentage. Il s'avère que toute la largeur et la longueur de l'écran seront de 100 % x 100 %. Nous devons étirer l'image à cette largeur. Ajoutons une ligne à l'entrée de l'image dans le fichier style.css, qui étendra l'image sur toute la largeur et la longueur du moniteur. Comment est-ce écrit en style CSS ? C'est simple!

arrière-plan : url(Images/Picture.jpg")

taille de l'arrière-plan : 100 % ; /* cette entrée convient à la plupart navigateurs modernes */

Nous avons donc compris comment créer une image comme arrière-plan en HTML pour remplir tout l'écran. Il existe également un moyen d'écrire dans le fichier index.htm. Bien que cette méthode soit dépassée, il est nécessaire que les débutants la connaissent et la comprennent. Dans la balise (head)(style) div ( background-size: cover; ) (/style) (/head), cette entrée signifie que nous allouons un bloc spécial pour l'arrière-plan, qui sera positionné sur toute la largeur du fenêtre. Nous avons examiné 2 façons de créer un arrière-plan de site Web image html afin que l'image s'étende sur toute la largeur de l'écran dans n'importe quel navigateur moderne.

Comment créer un arrière-plan fixe

Si vous décidez d'utiliser une image comme arrière-plan d'une future ressource Web, il vous suffit alors de savoir comment la rendre immobile afin qu'elle ne s'étire pas en longueur et ne gâche pas l'aspect esthétique. Il est assez simple d’écrire ce petit ajout avec de l’aide. Vous devez ajouter une phrase dans le fichier style.css après background: url(Images/Picture.jpg") fixe ; ou à la place ajouter une ligne séparée après le point-virgule - position : fixe. Ainsi, votre image de fond deviendra immobile. En parcourant le contenu du site, vous verrez que chaînes de texte bouge, mais l’arrière-plan reste en place. Vous avez donc appris à créer une image d’arrière-plan en HTML de plusieurs manières.

Travailler avec un tableau en HTML

De nombreux développeurs Web inexpérimentés, confrontés à des tableaux et à des blocs, ne comprennent souvent pas comment créer une image comme arrière-plan d'un tableau en HTML. Comme tous les styles CSS, ce langage de programmation web est assez simple. Et la solution à un tel problème serait d’écrire quelques lignes de code. Vous devez déjà savoir que l'écriture des lignes et des colonnes du tableau est respectivement appelée balises (tr) et (td). Pour réaliser le fond du tableau sous forme d'image, vous devez ajouter une phrase simple à la balise (table), (tr) ou (td) indiquant un lien vers l'image : background = URL de l'image. Pour plus de clarté, donnons quelques exemples.

Tableaux avec une image au lieu d'un arrière-plan : exemples HTML

Dessinons un tableau 2x3 et faisons de son arrière-plan une image enregistrée dans le dossier « Images » : (arrière-plan du tableau = « Images/Picture.jpg ») (tr) (td)1(/td) (td)2(/td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/table). De cette façon, notre tableau sera peint en arrière-plan de l’image.

Dessinons maintenant la même plaque de dimensions 2x3, mais insérons une image dans les colonnes numérotées 1, 4, 5 et 6. (table)(tr)(td background = « Images/Picture.jpg »)1(/td) (td )2 (/td) (td)3(/td)(/tr) (tr)(td fond = « Images/Picture.jpg »)4(/td) (td fond = « Images/Picture.jpg ») 5( /td) (td background = « Images/Picture.jpg »)6(/td) (/tr) (/table). Après visualisation, nous voyons que l'arrière-plan n'apparaît que dans les cellules dans lesquelles nous nous sommes inscrits, et non dans l'ensemble du tableau.

Compatibilité multi-navigateurs du site

Il existe également une compatibilité entre navigateurs d'une ressource Web. Cela signifie que les pages du site s'afficheront également correctement dans différents types et les versions du navigateur. Dans ce cas, vous devez personnaliser le code HTML et le style CSS en fonction navigateurs requis. D’ailleurs, dans les temps modernes développement des smartphones, de nombreux développeurs web tentent de créer des sites web adaptés pour versions mobiles et sous une vue informatique.

DANS arrière-plan HTML ils ne sont pas précisés pour le site, ceci est écrit en utilisant des styles CSS, mais ce n'est qu'une formalité théorique. Voyons maintenant comment déterminer ce fond.

Arrière-plan d'un site Web ou d'un bloc séparé

Puisque nous avons besoin d'un fichier CSS pour atteindre cet objectif, nous devons le créer et le connecter au HTML. Ceci est écrit dans. Après cela, vous pouvez commencer à travailler. Tout d’abord, vous devez décider sur quoi vous souhaitez définir l’arrière-plan. Si la page entière est dans son ensemble, vous pouvez le faire comme ceci :

Corps (couleur de fond : blanc ; )

Autrement dit, nous accédons à la balise body, qui représente l’intégralité de notre page. Pour définir la couleur d'arrière-plan, utilisez la propriété background-color. Mais que se passe-t-il si vous devez définir un motif pour l’arrière-plan plutôt qu’une couleur unie ? Ensuite, vous devriez l'écrire comme ceci :

Corps (image d'arrière-plan : url (chemin d'accès à l'image. extension d'image))

Pour plus de clarté, je propose de tout regarder plus en détail à l'aide d'un exemple. Pour cela, j'utiliserai cette image :

Par exemple, background-image: url(comp.png) . Dans cet exemple, nous définissons une image d'arrière-plan appelée comp (c'est ainsi que je l'ai appelée) format png, qui se trouve dans le même dossier que le fichier CSS.
En HTML, je vais créer un bloc personnalisé avec des dimensions spécifiques pour démontrer le fonctionnement des propriétés CSS.

Et voici les styles correspondants :

#ct(image d'arrière-plan : url(comp.png); largeur : 600 px ; hauteur : 400 px ; )

Voici ce que nous avons obtenu :

Pourquoi donc? Le fait est que par défaut, le navigateur répète l'image autant de fois pour remplir complètement le bloc. Parfois, cela est nécessaire, par exemple lors de l'utilisation de motifs sans couture, mais dans notre cas, il ne devrait y avoir qu'une seule image. Heureusement, cela peut être géré très facilement.

Répéter l'arrière-plan

Si vous avez une image en arrière-plan, elle sera répétée par défaut horizontalement et verticalement pour remplir tout l'espace de la page. Pour supprimer cela, utilisez la propriété background-repeat et sa valeur de non-répétition. Il existe également les valeurs suivantes :

• Répéter-x – répéter uniquement horizontalement
• Répéter-y – vertical uniquement

Ajoutons aux propriétés de notre fond graphique :

Répétition en arrière-plan : pas de répétition ;

Position

La propriété background-position détermine l'emplacement où l'image sera placée. Deux valeurs sont spécifiées ici – horizontalement et verticalement. Exemples : background-position : right bottom – position dans le coin inférieur droit, top-left – dans le coin inférieur supérieur (et donc par défaut), 250px 500px – décalage par rapport à la gauche coin supérieur vers la droite de 250 pixels et vers le bas de 500.

Regardons de plus près des exemples :

Position de l'arrière-plan : en haut à droite ;

L'image se déplacera vers le bord supérieur droit. J'ai également donné au bloc un fond jaune pour que ses bords soient visibles.

position d'arrière-plan : 50 % 50 % ;

L'image apparaissait exactement centrée dans son bloc. Oui, oui, cela est également possible grâce à l'enregistrement en pourcentage de la position.

position d'arrière-plan : 70 % 20 % ;

L'arrière-plan est décalé de 70 % horizontalement et de 20 % verticalement.

Il est également permis de spécifier une valeur de position négative en pixels. Cela peut être fait, par exemple, lorsque vous utilisez une grande image de sprite et que vous devez placer la partie requise de ce sprite dans un bloc.

Verrouiller l'arrière-plan

J'aime aussi beaucoup une propriété appelée background-attachment . Il n'a que deux valeurs et la première est la valeur par défaut (défilement). Cela signifie que lorsque vous faites défiler la page, l'arrière-plan défilera également, et si vous utilisez une image sans répétition, elle finira par être de couleur unie.

Pour éviter que cela ne se produise, background-attachment:fixed est spécifié et notre arrière-plan est désormais solidement fixé. Cela peut être comparé à la manière de définir une position fixe pour un bloc afin qu'il ne disparaisse pas de la page lors de son défilement.

Une version abrégée de toute cette bonté

Nous avons évoqué de nombreuses propriétés qui vous permettent de créer un arrière-plan, mais si vous les utilisez toutes, vous vous retrouvez avec un enregistrement fastidieux. Il y a très solution élégante. La propriété background permet d'écrire un espace séparé paramètres requis dans cet ordre:
Arrière-plan : position de la broche de répétition de l'image couleur ;
Et maintenant, tout peut s'écrire ainsi :

Arrière-plan : url jaune (comp.png) sans répétition 20 % 100 px ;

Si une propriété n'a pas besoin d'être définie, elle est simplement omise (dans notre cas, nous n'avons pas écrit background-attachment).

Beaucoup d'arrière-plans

Et si vous avez besoin de plusieurs images d’arrière-plan ? Cela arrive, que pouvez-vous faire ? Aujourd'hui, CSS prend en charge cette fonctionnalité. Essayons-le aussi. Prenons cette icône

Je l'ai appelé ordinateur portable.

Et voici le code pour insérer le multiphone :

Arrière-plan : url(comp.png) sans répétition 20 % 100 px, url(laptop.png) sans répétition 50 % 50 % ; couleur de fond : jaune ;

Comme vous pouvez le constater, il vous suffit de mettre une virgule après la première image et de saisir les paramètres de la seconde. Dans ce cas, il est préférable de définir une couleur unie séparément.

De la même manière, vous pouvez enregistrer autant d’images que vous le souhaitez, mais n’en faites pas trop : trop de graphiques ne sont pas très bons.

C'est ici que je voudrais terminer cet article. Vous pouvez faire beaucoup d'autres choses intéressantes avec l'arrière-plan, j'essaierai d'écrire à ce sujet à l'avenir (et j'ai déjà écrit quelque chose - par exemple).

Lors de la création d’un site Web, outre la fonctionnalité, le design est très important. C'est ce qui définit propre style et la conception d'une entreprise ou d'une personne particulière pour laquelle le site est créé. La personnalisation de la couleur et de l'image d'arrière-plan est simple en suivant les instructions de cet article.

Ouvrez le vôtre Fichier HTMLà l'aide d'un bloc-notes ou de tout autre éditeur de texte, auquel vous êtes habitué. Par exemple, prenons une page de site Web primitive avec un minimum de texte. Vous pouvez ouvrir votre fichier en utilisant n'importe quel navigateur.

Tout d’abord, changez la couleur de votre arrière-plan, car les personnes disposant d’une connexion Internet lente ne pourront pas voir immédiatement l’image d’arrière-plan du site. Pendant un certain temps, pendant le chargement de l’image, ils ne pourront voir que la couleur de votre site.
Entrez dans la balise paramètre bgcolor="*****", où ***** est le code couleur. Vous pouvez trouver les couleurs du HTML dans n'importe quel éditeur graphique en sélectionnant l'option « pour le web » ou sur le site https://colorscheme.ru/color-names

Il vous suffit de sélectionner une couleur dans la palette du cercle et d'attribuer son intensité au sein du carré. Sur la droite, vous verrez deux codes pour le HTML. Copiez-les et collez-les dans le bloc-notes.

Après avoir sélectionné une couleur et l'avoir insérée dans le code, vérifiez si vous avez tout fait correctement en visualisant la page Web résultante à partir d'un navigateur.

Vous pouvez maintenant commencer à insérer votre image d'arrière-plan. Placez l'image souhaitée dans le dossier de code pour plus de commodité. Donnez-lui un nom en lettres latines.

Découvrez maintenant l'emplacement du fichier en cliquant dessus clic-droit souris en sélectionnant la ligne « Ouvrir avec » et en cliquant sur n’importe quel navigateur installé sur votre ordinateur.

Copiez l'adresse de la barre de recherche de votre navigateur.

Maintenant dans la balise entrez la ligne :

• style = "image d'arrière-plan : url ('file:///C:/Users/FILE_PATH.jpg')"

Enregistrez votre fichier.

Vérifiez votre page Web. Vous verrez que l’arrière-plan a été remplacé par votre texte.

Veuillez noter que les utilisateurs avec plus haute résolutionécran, votre image sera dupliquée vers le bas et vers la droite. Cela n'aura pas l'air bien si l'image n'est pas monochrome. Il existe des commandes spéciales pour corriger ce paramètre.

• répétition d'arrière-plan : "Valeur." Les options pour votre valeur pourraient être : « répéter-x » – répète votre image d'arrière-plan à la fois horizontalement et verticalement. « repeat-y » – répétition uniquement verticalement. « no-repeat » : l'image est figée sur place et ne se répète pas. « espace » – la page entière sera remplie nombre maximum copies de l’image, les plus extérieures seront rognées. « rond » – la même option, mais les bords de l'image seront soigneusement redimensionnés ;
• pièce jointe d'arrière-plan : « Valeur ». Si vous remplacez la balise « scroll » au lieu du mot Value, l'image défilera avec le site. « fixe » – l'arrière-plan reste inchangé lors du défilement ;
• taille d'arrière-plan : valeur valeur2. Ici les valeurs doivent prendre une valeur en pixels. Par exemple : 100px 200px. En plus des pixels, les valeurs en pourcentage sont acceptées. Il s'agit d'une option pour remplir la page avec une image. En plus des chiffres, vous pouvez saisir deux paramètres : « contenir » – remplit la page avec une image sur le côté long et « couverture » – remplit la page avec une image sur la largeur.

Une fois que vous connaissez les bases du remplissage d’une page avec un arrière-plan en HTML, vous êtes prêt à créer votre premier site Web.