Pages de fond HTML. Tags HTML de base pour créer un arrière-plan

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

Pour afficher l'image sur la page utilise un attribut src. Src Il est apparu de la source, ce qui signifie une source. La valeur d'attribut SRC est uRL Images.

La chaîne ci-dessus signifie que l'image est dans le même répertoire (dossier) que le fichier HTML faisant référence à cette image. Supposons que vous ayez un dossier hTML.qui contient index.html avec le code ci-dessus et le nom lui-même appelé image.jpg..

Dans ce cas, lors de l'ouverture index.html Dans le navigateur, vous verrez cette image. Si vous l'avez ailleurs ailleurs (sur le dossier au-dessus ou ci-dessous), vous aurez plutôt un champ blanc ou un petit rectangle avec une croix rouge (Impossible de télécharger l'image).

Les images ne sont pas toujours dans le même répertoire (dossier) que le fichier lui-même, de sorte que les chemins de prescription seront spécifiquement décrits un peu plus tard.

Attributs tag img.

En plus du SRC, la balise IMG comporte d'autres attributs responsables des dimensions de l'image affichée, de la signature et du point de vue.

src - Ajouter une image
largeur - largeur de l'image
hauteur - hauteur de l'image
titre - Signature, qui est affichée lors de la navigation sur l'image
alt. - Texte alternatif. Besoin de robot de recherche. et indexation des images
frontière. - Épaisseur de la frontière d'image. 0 - pas de bordure, 1 - la bordure la plus mince et ainsi

Adresse d'adresses (exemples)

D'habitude, images stocké pas dans le même dossier que lui-même fichier html.. Pour ce faire, le dossier est créé dans le même répertoire. images (ou img, il y a un goût et une couleur). Et dans elle déjà mettre toutes les images nécessaires. Dans le cas d'un stockage individuel, vous devrez déjà être prescrit pour l'attribut SRC une autre adresse

Si le fichier est sur le dossier ci-dessus, alors

Vous pouvez également insérer l'image du tout depuis un autre site, sans le charger dans votre dossier. Pour ce faire, vous devez avoir une connexion stable à Internet et sur le code suivant dans lequel, dans l'adresse, vous prescrivez l'adresse d'image sur Internet:

Image d'arrière-plan en html

Comme image de fond Peut effectuer des fichiers avec des extensions gif., jpg., jpeg et png.. Dans le cas où la taille de l'image est plus petite que la fenêtre du navigateur, l'image remplira automatiquement le fond restant. DANS corps. Utiliser l'attribut contexte.dans lequel nous prescrivons le chemin à l'image

12/27/14 55.8k.

Toute chambre sera beaucoup mieux meilleure si son sol monte chère tapis persan. Donc, le pire votre site? Peut-être que c'est le temps et son sol "pince" chers palais à la main élégant. Nous comprendrons plus sur la façon de faire un arrière-plan pour le site:

Fond pour le site

Il arrive que vieux design Le site est déjà venu. Et je veux quelque chose de nouveau et savoureux. MAIS nouveau design Ce sera tel que vous le faites cuire avec vos propres mains.

Mais changer complètement de la conception de la ressource vous-même - la chose est ingrat. Oui, et tout le monde n'a rien de chose pour cela, comment "aiguiser" les mains. Par conséquent, il est plus facile d'actualiser vieux gabaritEn modifiant la couleur de l'arrière-plan de la ressource ou de son image d'arrière-plan.

Il existe plusieurs façons de changer l'arrière-plan sur le site. Cela utilise des capacités CSS ou HTML. Mais de nombreuses propriétés pour travailler avec l'arrière-plan ont le même nom et la même méthodologie d'application dans ces technologies Web.

Principes de base du travail avec fond en HTML

En arrière-plan, vous pouvez utiliser plusieurs éléments:

• Couleur;
• Image de fond;
• Image textuelle.

Nous traiterons de l'utilisation de chacun d'eux plus en détail.

Afin de définir la couleur arrière-plan arrière Pour le site, utilisez la propriété Attribut de style de style style style. C'est-à-dire pour définir la couleur principale de la page Web, vous devez l'enregistrer à l'intérieur de la balise. . Par example:

Fond de site # 55d52b

En plus du code de couleur hexadécimal, la valeur du format de mots-clés ou de la RVB est prise en charge. Exemples:

Contexte du site Web de RVB (23,113,44)

Contexte du site vert vert.

Réglage de la couleur d'arrière-plan à l'aide de mots-clés a un certain nombre de restrictions par rapport aux deux manières restantes.

HTML prend en charge uniquement 16 mots-clés pour définir la couleur. En voici quelques uns: blanc, rouge, bleu, noir, jaune autre.

Par conséquent, afin de définir le fond du site HTML, il est préférable d'utiliser le format hexadécimal ou le RVB.

En plus de la sélection de la couleur, d'autres paramètres sont disponibles. Si la propriété de couleur de fond définit la valeur transparente, le fond de la page deviendra transparent. Cette valeur est attribuée à cette propriété par défaut.

Considérons maintenant la possibilité d'une langue hypertext pour l'installation. arrière-plan pour le site. Il est possible de le faire utiliser la propriété de fond-image.

Comme on peut le voir à partir du code, la liaison d'image se produit via le chemin d'URL spécifié entre crochets. Mais toutes les images ne se révèlent pas si grandes pour remplir toute la zone de l'écran avec leurs tailles. Voyons comment la figure plus petite sera affichée.

Supposons que nous développions un site sur la poésie et que le substrat, vous devez utiliser l'image de Pegasus. Le cheval ailé fera personnifier la liberté de la pensée créative du poète!

Nous avons besoin que l'image soit affichée au milieu de l'écran une fois. Mais, malheureusement, le navigateur ne comprend pas nos désirs sublimes. Et affiche une image plus petite pour l'arrière-plan du site autant de fois que la zone d'écran peut accueillir:

Probablement quatre chevaux souriants avec des ailes de poètes seront trop pour inspiration. Par conséquent, interdisez le clonage de notre Pegasus. Nous faisons cela en utilisant la propriété de répétition de fond. Valeurs possibles:

• répétition-x - répétition de l'image d'arrière-plan horizontalement;
• répéter-y - verticalement;
• répéter - sur les deux axes;
• nON-REPEAT - La répétition est interdite.

Parmi les options énumérées, nous sommes intéressés par le dernier. Avant de changer l'arrière-plan du site, nous l'utilisons dans votre code:

Mais, bien sûr, il est préférable que notre location est située au milieu de l'écran. La propriété de position de fond est simplement conçue pour positionner le motif de fond sur la page. Définissez les coordonnées de localisation de plusieurs manières:

• Mot-clé ( haut, bas, centre, gauche, droite);
• Pourcentages - le compte à rebours commence à partir du coin supérieur gauche;
• En unités de mesure (pixels).

Nous utilisons le plus option simple Centrage:

Il arrive que vous devez fixer la position du dessin lors du défilement. Par conséquent, avant de créer une image du site Web, utilisez la propriété spéciale de fond-attachement. Les valeurs prises par eux:

• faire défiler;


• Fixé.

Nous avons besoin de la dernière signification. Maintenant, le code de notre exemple ressemblera à ceci:

Fond de texture du site

Dans le premier exemple, pour l'arrière-plan, nous avons utilisé un grand et beau paysage du désert. Mais pour une telle beauté, vous devez payer pleinement. Le poids de l'image effectuée en haute qualité peut atteindre plusieurs mégaoctets.

Ce volume n'affecte pas la vitesse de téléchargement de la page du navigateur à connexion haute vitesse Avec Internet. Mais comment être avec internet mobileLorsque vous utilisez le chargement de plusieurs "mètres" prendra une longue période?

Bonjour à tous! En contact avec vous votre humble serviteur avec une partie de matériau utile et pratique sur la manière d'installer le fond du site. C'est le tout début dans la mise en page HTML et ici, je vais manifester clairement sur l'exemple de comment puis-je faire beau fond Pour le site, qui accrochera sans ambiguïté l'utilisateur Internet et donnera à l'originalité.

Si vous avez attiré l'attention, la plupart des hommes d'affaires en ligne utilisent un fond unique dans leurs pages et pages de vente. Aujourd'hui, nous analyserons la composante technique de ce processus.

Donc, pour le début, nous avons besoin, bien sûr, la photo. Dans l'Internet surestimé, il y a un très bon site où vous pouvez télécharger gratuitement différent images pour le fond du site. Ils sont juste un énorme plateau là-bas. Le site s'appelle des modèles subtils.

Il est affiché dans la liste du moteur de recherche Google en premier lieu, c'est pourquoi je le recommande dans le document. Vous pouvez également trouver un grand nombre d'autres sites si vous collectez dans le moteur de recherche approximativement à des phrases «modèles d'image de fond», «Téléchargez l'image de fond pour le site» et ainsi de suite.

Qui n'a aucun problème avec l'anglais, alors vous n'aimerez pas de difficulté.

Dans cet article, j'ai choisi le sujet et appelé Tweed. Téléchargez que tu peux elle.

Voici à quoi cela ressemble dans une petite version sur le site.

Au début, nous créons un nouveau document dans le programme

Et assurez-vous d'être gardé sous sa modification sous le nom, par exemple index.html Et créer un dossier sur un ordinateur, par exemple, vous pouvez créer le dossier "Mon site" et mettre déjà notre fichier d'index (index.html). Mieux vaut créer un dossier sur langue AnglaisePour qu'il n'y ait aucune confusion du navigateur et l'affichage incorrect du site.

De plus, dans le dossier principal "Mon site", vous devez créer deux autres sous-dossiers, nous allons placer toutes nos images et elle s'appellera des "images", et nous donnerons le nom "CSS" (feuilles de style en cascade) et mettre le fichier là-bas style.css.

Maintenant, vous pouvez travailler dans notre document. La prochaine étape, nous devons insérer la pièce code HTML, le soi-disant cadre principal d'où tout commence. Vous pouvez le télécharger directement. Ensuite, copiez tout de ce fichier et passez au fichier de notre programme. En conséquence, quelque chose comme le suivant devrait se révéler.

À côté du nom de fichier, vous remarquerez le swap rouge. Donc, s'il est rouge, le fichier n'est pas enregistré, assurez-vous d'appuyer sur le bouton Enregistrer pour enregistrer le bouton bleu.

DANS titre de tag Vous pouvez modifier le nom du document, par exemple, vous pouvez faire «ma première page Web». Et assurez-vous que votre page est enregistrée dans le codage Utf - 8.

Sinon, si un autre codage est de rester debout, par exemple, Windows-1251, le texte du document dans le navigateur sera affiché par Hiéroglyphes. Vous pouvez modifier le codage dans le «codage de codage dans UTF-8 (sans naissance)» dans la barre d'outils du programme.

Et n'oubliez pas chaque action de sauvegarder.

Maintenant, procédez à la création de l'arrière-plan dans notre document. Je dirai que toutes nos actions sur la conception de la page Web se produiront à l'aide de styles en cascade appelés CSS, c'est-à-dire le cadre que nous ferons en HTML, et nous l'apporterons à un beau style et de voir CSS.

Ainsi, vous vous êtes précis à la bonne procédure. Ne pas juste dans document HTMLe Pour vous engager dans des styles, mieux les poster dans un document séparé.

Pour cela dans notre programme de bloc-notes++ Créez un autre fichier et appelez-le style.CSS et enregistrez-le dans le nouveau dossier CSS, qui sera dans dossier partagé "MON SITE"

Excellent! Pour que notre navigateur affiche correctement la page, nous devons connecter la feuille de style dans notre document HTML. Voici comment ça se fait

Entrez à juste titre la ligne complète. Nous branchons dans notre feuille de style de style.
Nous sommes maintenant pour notre étiquette de carrosserie pour déterminer la photo d'arrière-plan à travers la feuille de style. Pour ce faire, nous sommes dans le document de document.CSS crée la structure suivante (directement également et écrire dans le code du programme)

Ici, je vais expliquer un peu. L'attribut d'arrière-plan a de nombreuses valeurs, dont l'une est une répétition de fond, qui est responsable de l'étirement de notre image de fond pour le document Web.

Répétition du fond:

Répéter // (dehors horizontalement et vertical) répéter-x // (n'étant que horizontalement) répéter-y // (n'étant que vertical) non répétée // (ne pas répéter l'image de fond)

Dans notre cas, nous sommes notre petite image réplique et verticalement et horizontalement. En conséquence, la page entière s'avère complétée par notre image. Voici comment on dirait dans le navigateur:

Également spécifiquement pour vous faire une sélection de sites où vous pouvez télécharger un beau fond sur le site.

Les navigateurs modernes vous permettent d'ajouter un nombre arbitraire d'images de fond à l'élément en lisant les paramètres de chaque fond à travers la virgule. Il suffit d'utiliser la description universelle de l'arrière-plan et d'indiquer le premier arrière-plan et la deuxième virgule.

Comment étirer l'arrière-plan sur toute la largeur de la fenêtre?

La propriété de taille d'arrière-plan est conçue pour augmenter l'arrière-plan, 100% est spécifiée comme valeur, puis l'arrière-plan occupera toute la largeur de la fenêtre du navigateur. Pour les versions plus anciennes de navigateurs, utilisez des propriétés spécifiques avec des préfixes, comme indiqué dans l'exemple 1.

Comment ajouter un dessin d'arrière-plan sur une page Web?

Pour ajouter une image d'arrière-plan sur une page Web, réglez le chemin d'accès à l'image à l'intérieur de la valeur de l'URL du style de la propriété d'arrière-plan, qui est ajoutée au sélecteur de corps.

Est-il possible de faire un fond animé?

Une animation est une réception assez forte qui peut faire revivre tout document, il n'est donc pas surprenant que la technologie Flash ait acquis une énorme popularité qui ajoute aux pages Web des dessins animés, en plus de l'interactivité. Format graphique GIF prend également en charge l'animation la plus simple par décalage de cadre cohérent. Ainsi, en utilisant l'image dans ce format, il est permis d'animer non seulement des images individuelles, mais également de l'arrière-plan d'une page Web ou d'un certain élément.

Tout d'abord, vous devrez créer une image animée au format GIF, pour laquelle vous pouvez utiliser le programme. Adobe Photoshop. ou un autre approprié à cette fin. Il existe également des bibliothèques de fichiers animés prêts à l'emploi qui peuvent être utilisés comme image d'arrière-plan. Ensuite, l'image est ajoutée en arrière-plan avec le style du style de l'arrière-plan, comme indiqué dans l'exemple 1.

Comment mettre un motif de fond dans le coin inférieur droit de la page?

Pour contrôler la position du motif d'arrière-plan sur la page, la page est appliquée au style de la position d'arrière-plan, elle définit simultanément les coordonnées d'image horizontalement et verticales. Pour annuler la répétition de l'image d'arrière-plan, utilisez la propriété de position d'arrière-plan avec la valeur sans répétition.

Comment faire le fond pas répété?

Par défaut, l'image d'arrière-plan est répétée horizontalement et verticalement, configurant une mosaïque sur l'ensemble du champ de la page Web. Cependant, ce comportement de l'arrière-plan n'est pas toujours requis, notamment en cas de placement d'une seule image, de sorte que aider va venir Valeur non répétée ajoutée au style de la propriété de fond.

Comment faire le fond répété uniquement par vertical?

La répétition des antécédents est généralement nécessaire pour créer des lignes de décoration ou des gradients liés à la hauteur de l'élément ou de la fenêtre de la page Web. Dans de tels cas, la répétition de l'arrière-plan vertical fournit une image solide indépendamment de la taille des éléments. Seuls les premiers devraient être inquiets que l'image d'arrière-plan soit répétée sans jonctions.

De l'auteur: Je souhaite la bienvenue à tout le monde. Couleurs d'arrière-plan et images dans la conception Web ont un rôle énorme, car ils vous permettent de disposer de manière plus attrayante tous les éléments. Comment faire un arrière-plan dans HTML, nous examinerons aujourd'hui.

Est-il possible de faire avec les moyens de HTML lors du réglage de l'arrière-plan?

Immédiatement, je dirai qu'il n'y a pas. En général, HTML n'est pas créé pour établir des pages Web. C'est juste très inconfortable. Par exemple, il y a un attribut BGColor, avec lequel vous pouvez définir couleur de l'arrière plan, mais c'est très inconfortable.

En conséquence, nous utiliserons des feuilles de style en cascade (CSS). Il y a beaucoup plus d'opportunités pour la tâche du ralkgrow. Aujourd'hui, nous analyserons le plus basique.

Comment définir le fond via CSS?

Donc, tout d'abord, vous devez décider de la manière dont l'élément doit être spécifié. C'est-à-dire que nous devons trouver le sélecteur à qui nous écrirons une règle. Par exemple, si l'arrière-plan doit être posé à la page entière dans son ensemble, vous pouvez le faire via le sélecteur de corps, tous les blocs - via le sélecteur DIV. Eh bien, etc. L'arrière-plan peut et doit être attaché à tout autre sélecteurs: classes stylisées, identifiants, etc.

Une fois que vous avez décidé sur le sélecteur, vous devez écrire le nom de la propriété lui-même. Pour régler la couleur d'arrière-plan (couleur unie précisément, pas de gradient et non d'images), la propriété de couleur arrière-plan est utilisée. Après cela, vous devez mettre le côlon et écrire la couleur elle-même. Cela peut se faire de différentes façons. Par exemple, en utilisant des mots-clés, un code hexagonal, RVB, RGBA, des formats HSL. Toute façon va correspondre.

La méthode du code hexadécimal est la plus souvent utilisée. Pour sélectionner des couleurs, vous pouvez utiliser un programme dans lequel le code de couleur est visible. Par exemple, Photoshop, peinture ou tout outil en ligne. En conséquence, par exemple, le fond général de la page Web complète.

corps (couleur-couleur: # d4e6b3;)

Ce code doit être inséré dans la section principale. Il est important que les fichiers soient dans le même dossier.

Image comme arrière-plan

Comme une image, je vais utiliser une petite icône langue HTML:

Créez un bloc vide avec un identifiant:

< div id = "bg" > < / div >

Laissez-le donner des tailles et des antécédents explicites:

#Bg (largeur: 400px; hauteur: 250px; image-fond-image: URL (html.png);)

#bg ( largeur: 400px; hauteur: 250px; arrière-plan - image: URL (HTML. PNG);

De ce code, vous pouvez voir que j'ai utilisé une nouvelle propriété - image arrière-fond. Il est destiné à insérer une image en tant qu'élément HTML de toile de fond. Voyons ce qui se passe:

Pour définir une image, vous devez écrire après le côlon mot-clé URL, puis entre parenthèses, spécifiez le chemin du fichier. Dans ce cas, le chemin est indiqué en fonction du fait que l'image réside dans le même dossier que le document HTML. Vous devez également spécifier le format d'image.

Si vous l'avez fait, et que l'arrière-plan ne disparaît pas dans le bloc, vérifiez à nouveau si vous avez écrit le nom de l'image correctement, le chemin et l'expansion sont corrects. Ce sont les raisons les plus fréquentes pour lesquelles l'arrière-plan n'est tout simplement pas affiché, car le navigateur ne trouve pas l'image.

Mais avez-vous remarqué une caractéristique? Le navigateur a pris et répandre la photo dans tout le bloc. Ainsi, afin que vous sachiez, c'est le comportement des images d'arrière-plan par défaut - ils sont répétés verticalement et horizontalement à ceux-ci, alors qu'ils peuvent entrer dans le bloc. Sur ce comportement, vous pouvez facilement gérer. Pour ce faire, utilisez la propriété de répétition de fond, qui a 4 valeurs principales:

Répétez la valeur par défaut, l'image est répétée des deux côtés;

Répéter-x - ne répète que sur ou x;

Répéter-y - répéter uniquement le long de l'axe Y;

Non-répéter - pas répété du tout;

Chaque valeur que vous pouvez enregistrer et voir ce qui se passe. Je regarde ceci:

fond-répéter: répéter-x;

contexte - Répétition: répétez - x;

Maintenant, la répétition est uniquement horizontale. Si vous vous enregistrez aucune répétition, il n'y aurait qu'une seule image.

Excellent, vous pouvez déjà terminer, car il s'agit des caractéristiques de base de travailler en arrière-plan, mais je vais vous montrer 2 autres propriétés qui vous permettent d'obtenir plus d'opportunités de gestion.

Avec l'aide de la répétition, les verticaux utilisés pour obtenir le fait que les textures de fond et les gradients créés, en utilisant une petite image. Cela pourrait être 30 pour 10 pixels ou même moins. Ou peut-être un peu plus. L'image était telle que lorsqu'il a répété un ou même des deux côtés, il n'y avait pas de transitions, donc à la fin, un seul fond d'une seule pièce a été obtenu. À propos, une telle approche doit être utilisée et maintenant, si vous souhaitez utiliser une texture transparente sur votre site en tant qu'appount. Le gradient d'aujourd'hui peut déjà être mis en œuvre par des méthodes CSS3, nous en parlerons toujours.

Position de fond

Par défaut, l'image d'arrière-plan, si la répétition n'est pas spécifiée pour elle, sera dans le coin supérieur gauche de son bloc. Mais la position peut être facilement modifiée en utilisant la propriété de position d'arrière-plan.

Vous pouvez spécifier-le de différentes manières. Une des options, il suffit de spécifier les parties dans lesquelles la photo devrait être:

contexte de fond: haut droit;

contexte - Position: top droit;

C'est-à-dire que tout reste verticalement: la photo d'arrière-plan est située sur le dessus, mais horizontalement, nous avons changé de côté à droite, c'est vrai. Une autre façon de définir une position est en pourcentage. Le compte à rebours au même moment commence dans tous les cas du coin supérieur gauche. 100% - tout bloc. Ainsi, pour mettre la photo exactement au centre, écrivez-le:

contexte de base: 50% 50%;

contexte - Position: 50% 50%;

Rappelez-vous une chose importante associée au positionnement - le premier paramètre indique toujours la position horizontale et la seconde est verticalement. Donc, si vous voyez une valeur de 80% 20%, vous pouvez immédiatement conclure que l'image d'arrière-plan sera très décalée à droite, mais cela ne tombera pas beaucoup.

Eh bien, enfin, il est possible de prescrire une position en pixels. Tout de même, ce n'est que au lieu de% il y aura PX. Dans certains cas, ce positionnement peut également être nécessaire.

Enregistrement abrégé

Convenez que le code est assez lourd, si nous établissons tout comme nous l'avons fait. Il s'avère, et le chemin de la photo doit être spécifié, et la répétition et la position. Bien entendu, la répétition et la position n'est pas toujours nécessaire, mais dans tous les cas, il sera plus correct d'utiliser l'entrée de propriété abrégée. Elle ressemble à ceci:

contexte: # 333 URL (BG.JPG) NO-REPEAT 50% 50%;

arrière-plan: URL # 333 (BG.JPG) NO-REPEAT 50% 50%;

C'est-à-dire la première chose à enregistrer une couleur d'arrière-plan solide totale, si nécessaire. Puis le chemin de l'image, la répétition et la position. Si un paramètre n'est pas nécessaire, nous l'omissons simplement. D'accord, il est beaucoup plus rapide et plus pratique, et nous réduisons également de manière significative notre code. En général, je vous conseille d'enregistrer toujours abrégé, même si vous n'avez besoin que de spécifier une couleur ou une image.

Gérer la taille de l'image de fond

Notre image actuelle n'est pas très bien adaptée à la démonstration du prochain tour, alors je vais en prendre un autre. En taille, ce sera comme un bloc ou plus. Ainsi, imaginez que vous avez une tâche: faites une photo d'arrière-plan afin qu'elle remplisse son bloc n'est pas complètement. Et la photo, disons encore plus de tailles de blocs.

Comment puis-je faire dans ce cas? Bien sûr, l'option la plus facile et la plus raisonnable réduira simplement la photo, mais il n'est pas toujours possible de le faire. Supposons que cela se situe sur le serveur et à l'heure actuelle, il n'y a pas de temps et le réduire. Le problème peut être résolu à l'aide de la propriété de taille d'arrière-plan, qui peut être appelée relativement nouvelle et qui vous permet de manipuler la taille de l'image d'arrière-plan et de tout fond.

Donc, ma photo couvre maintenant tout l'espace dans le bloc, mais je demanderai sa taille de fond:

taille de l'arrière-plan: 80% 50%;

contexte - Taille: 80% 50%;

Encore une fois, le premier paramètre est défini sur horizontalement, le second est verticalement. Nous voyons que tout est correctement appliqué - les photos devenaient la taille de 80% de la largeur du bloc large et de moitié dans la hauteur. Ici, il vous suffit de faire un raffinement - définir la taille en pourcentage, vous pouvez affecter les proportions de l'image. Alors soyez prudent si vous voulez ne pas perturber la proportion.

Comme vous pouvez le deviner, la taille de l'arrière-plan peut également être indiquée en pixels. Il reste encore deux valeurs de mots clés pouvant également être utilisées:

Couverture - Il y aura une image pour une image de telle manière qu'au moins un côté remplit complètement le bloc.

Contenir - sauvegardé de manière à ce que l'image a complètement grimpé dans le bloc de la taille maximale.

Les avantages de ces valeurs sont qu'ils ne changent pas les proportions de la photo, leur laissant la même chose.

Vous devez également comprendre que l'étirement de l'image peut entraîner une détérioration de sa qualité. Je peux donner un exemple de la vie et de la pratique réelle des vesteurs. Tout le monde sait et comprend que lors de la pose sous les ordinateurs de bureau, vous devez adapter le site sous les largeurs principales des moniteurs: 1280, 1366, 1920. Si vous prenez une image d'image de fond, disons, 1280 par 200 et ne spécifiez pas l'arrière-plan -Size, puis écrans avec largeur plus, il y aura un endroit vide, l'image ne remplira pas complètement la largeur.

Dans 99% des cas, cela n'est pas satisfait du développeur Web, il définit donc la taille de l'arrière-plan: le couvercle de l'image est toujours étiré au maximum sur la largeur de la fenêtre. il bonne réceptionVous devez utiliser, mais vous rencontrerez maintenant le problème que les utilisateurs d'une largeur d'écran de 1920 pixels peuvent voir une image de qualité non optimale.

Je vous le rappelle, il s'étire à la largeur maximale. En conséquence, la qualité se détériorera automatiquement. La seule bonne solution sera initialement utilisée pour utiliser une image plus grande - 1920 pixels de largeur. Ensuite, sur les écrans les plus larges, il sera dans sa taille naturelle et sur d'autres, il sera simplement de couper lentement, mais en même temps, avec une sélection compétente d'une image d'arrière-plan, sur apparence Le site n'affecte pas.

En général, il s'agit d'un exemple de 1 exemple de la manière d'utiliser les connaissances que vous avez reçues dans cet article, lors de la mise en place de mises en page réelles.

Fond translucide avec CSS

Une autre puce qui peut être mise en œuvre avec utiliser CSS. - fond translucide. C'est à travers ce contexte, vous pouvez voir quoi être derrière lui.

Par exemple, je définirai la page entière comme une image d'une image que nous avons utilisée plus tôt dans les exemples. Le bloc avec l'identifiant BG, sur lequel nous dépensons toutes nos expériences, définissez l'arrière-plan à l'aide du format de la tâche couleur RGBA.

Comme je l'ai déjà dit plus tôt, il existe de nombreux formats en CSS pour spécifier la couleur. L'un d'entre eux - RVB, assez format célèbre Ceux qui travaillent en rédacteurs. Il est écrit comme suit: RVB (17, 255, 34);

La première signification entre parenthèses est saturée de rouge, puis vert, puis bleu. La valeur peut être numérique de 0 à 255. En conséquence, format RGBA Aucun différent n'est différent, un seul paramètre est ajouté - Canal Alpha. La valeur peut être de 0 à 1, où 0 est une transparence complète.