Beaucoup nouvelle mise en page, juste aller au cœur de la création de sites, se demandent souvent comment HTML pour rendre l'image d'arrière-plan.Et si certains d'entre eux peut faire face à ce problème, vous avez encore des problèmes lors de l'étirement toute la largeur de l'image sur le moniteur.Dans le même temps, je voudrais voir le site sont affichés sur tous les navigateurs, alors elle doit se conformer aux exigences krossbrauzernosti.Vous pouvez définir un fond de deux manières: en utilisant les balises HTML et styles CSS.Chacun pour soi sélectionne la meilleure option.Bien sûr, le style CSS est beaucoup plus pratique, car le code est stocké dans un fichier séparé et ne prend pas des haut-parleurs supplémentaires dans les balises principales du site, mais d'abord envisager une méthode simple de réglage de l'image de fond sur le site.
balises HTML de base pour créer l'arrière-plan
Donc, aller à la question de savoir comment faire une image d'arrière-plan au format HTML à l'écran.Pour être belle site, vous avez besoin de comprendre un détail assez important: il est juste assez pour faire un fond dégradé ou une couleur unie à peindre, mais si vous voulez insérer l'image dans le fond, il ne sera pas étirer sur toute la largeur de l'écran.L'image était à l'origine nécessaire pour prendre ou faire votre propre conception avec cette extension, dans lequel vous allez afficher la page.Seulement lorsque l'image d'arrière-plan est prêt, le déplacer vers un dossier appelé «Images».Dans ce document, nous allons stocker toutes les images utilisées, des animations et d'autres fichiers image.Ce dossier devrait être dans le répertoire racine du fichier avec tous vos html.Maintenant, vous pouvez passer au code.Il ya plusieurs options pour le code d'enregistrement par lequel le motif va changer l'image.
- Ecrire attribut tag.
- via style CSS dans le code HTML.
- de style CSS Ecrire dans un fichier séparé.
Comment HTML pour rendre l'image d'arrière-plan, à vous de décider, mais je voudrais dire quelques mots sur la façon dont il serait la plus optimale.La première méthode est par écrit et par une étiquette depuis longtemps obsolète.La deuxième option est utilisée très rarement, parce qu'il se trouve que beaucoup de le même code.Une troisième option est la plus commune et efficace.Voici les exemples tag HTML:
- première méthode d'enregistrement via une balise (corps) dans le fichier index.htm.Il est écrit dans cette forme: (body background = "Nazvanie_papki / Nazvanie_kartinki.rasshirenie") (/ corps).Autrement dit, si nous avons une image avec le nom «Image» et l'extension JPG, et le dossier que nous avons appelé «Images», alors le record de code HTML devrait ressembler à ceci: (body background = "images / Picture.jpg") ... (/ corps).
- seconde méthode consiste à l'enregistrement de style CSS, mais est écrit dans le même fichier avec le nom index.htm.(corps style = "background: url (" ../ Images / Picture.jpg ') ").
- Et la troisième méthode d'enregistrement est faite en deux fichiers.Le document avec le tag nom index.htm (de la tête) est écrit une telle ligne: (tête) (link rel = de type "stylesheet" = "text / css" href = "Put_k CSS_faylu") (/ tête).Un fichier de style style.css nommé écrire déjà: body {background: url (Images / Picture.jpg ')}.
Comment HTML pour rendre l'image d'arrière-plan, nous avons discuté.Maintenant, vous avez besoin de comprendre comment étirer l'image sur toute la largeur de l'écran entier.Méthodes
d'étirements le papier peint sur la largeur de la fenêtre
imaginer notre écran sous forme de pourcentage.Il se trouve que la totalité de la longueur et de la largeur de l'écran est 100% x 100%.Nous avons besoin d'étirer l'image à cette largeur.Ajouter à enregistrer les images dans la ligne de fichier style.css qui étirer l'image à toute la largeur et la longueur de l'écran.Comme il est écrit dans votre style CSS?Il est simple!Corps
{
background: url (Images / Picture.jpg ')
background-size: 100%;/ * Ce poste convient à la plupart des navigateurs modernes * /}
donc nous avons pensé comment faire le fond de l'image en html à l'écran.Il est une méthode d'enregistrement dans le fichier index.htm.Bien que cette méthode et pas à jour, mais pour les débutants, il est nécessaire de connaître et de comprendre.La balise (tête) (style) div {background-size: couvercle;} (/ Style) (/ tête), ce record signifie que nous allouons une unité spéciale pour l'arrière-plan, qui sera positionné sur toute la largeur de la fenêtre.Nous avons examiné deux façons de rendre le site image de fond html, image est étirée sur toute la largeur de l'écran dans l'un des navigateurs modernes.
Comment faire un fond fixe
Si vous décidez d'utiliser l'image comme fond l'avenir de la ressource Web, alors vous avez juste besoin de savoir comment faire réparer, de sorte qu'il ne se détend pas, en longueur et n'a pas gâché l'aspect esthétique.Simplement en utilisant le code HTML pour enregistrer un petit plus.Vous avez besoin de la css fichier à ajouter une phrase après le background: url (Images / Picture.jpg ') fixe;ou à la place ajouté après le point-virgule ligne distincte - position: fixed.Ainsi, votre papier peint sera fixé.Pendant le défilement un site de contenu, vous verrez que les lignes de texte sont en mouvement, mais le fond reste en place.Donc, vous avez appris à HTML pour rendre l'image de fond, de plusieurs façons.
travailler avec des tables en HTML
nombreux développeurs web inexpérimentés, face à des tableaux et des unités souvent ne comprennent pas comment HTML pour rendre l'image tableau de fond.Comme tous les styles équipes HTML et CSS, le langage de programmation web est très simple.Et la solution à ce problème est d'écrire quelques lignes de code.Vous devez déjà savoir que l'écriture d'une table de lignes et de colonnes, respectivement, comme indiqué par les balises (TR) et (TD).Pour rendre le fond de la table sous la forme d'images, il est nécessaire d'ajouter à la balise (tableau), (tr) ou (td) une phrase simple en référence à l'image: background = URL de l'image.Pour plus de clarté, nous donnons quelques exemples.Tables
avec une image de fond à la place: exemples HTML
dessiner un tableau de 2x3 et rendent l'image de fond stockés dans le dossier "Images": (tableau background = "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) (/ tableau).Donc notre table sera établi dans le fond du tableau.
maintenant dessiner la même plaque formats 2x3, mais insérer une image dans un numéro de la colonne 1, 4, 5 et 6. (tableau) (tr) (td background = "images / Picture.jpg") 1 (/ td)(td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td background = "images / Picture.jpg") 4 (/ td) (td background = "images / Picture.jpg") 5 (/ td) (td background =" images / Picture.jpg ") 6 (/ td) (/ tr) (/ tableau).Après avoir regardé peut voir que l'arrière-plan apparaît uniquement dans ces cellules, dans lequel nous avons enregistrés, mais pas l'ensemble du tableau.
site de la Croix-navigateur
Il ya une telle chose comme cross-browser ressources compatibilité Web.Cela signifie que les pages du site seront aussi bien affichées dans différents types et versions des navigateurs.Il devrait être le code HTML et CSS pour personnaliser le style requis par les navigateurs.En outre, dans l'ère moderne de téléphones intelligents, de nombreux développeurs de sites Web tentent de créer des sites qui sont adaptées et une version mobile d'un ordinateur et de regarder.
