Comment faire un fond d'image dans HTML et CSS. 3 façons simples

Définit la couleur du tableau arrière de la palette. La couleur de l
Les salutations. Dans cet article, je tiens à raconter environ trois façons de placer une image en tant qu'appount de la page entière en utilisant uniquement HTML + CSS (sans utiliser JS).

Les salutations. Dans cet article, je tiens à raconter environ trois façons de placer une image en tant qu'appount de la page entière en utilisant uniquement HTML + CSS (sans utiliser JS).

Ainsi, les exigences relatives à l'image de fond que nous sommes les suivants:

  • 100% largeur et hauteur de pages couvertes
  • Les échelles de fond si nécessaire (l'arrière-plan est étiré ou comprimé en fonction de la taille de l'écran)
  • Collez les proportions des images (ratio d'aspect)
  • Image centrée sur la page
  • L'arrière-plan ne cause pas de rouleaux
  • La solution est au maximum Crossbrawser
  • Aucune autre technologie n'est utilisée sauf CSS

Définit la couleur du tableau arrière de la palette. La couleur de l'héritier coïncide toujours avec la couleur de l'élément ancêtre.

Méthode 1

À mon avis, c'est la meilleure façon, car c'est le plus simple, concis et moderne. Il utilise la propriété CSS3 Taille de fond. que nous appliquons à la balise Html. . Exactement Html. , mais non Corps. car Sa hauteur est supérieure ou égale à la hauteur de la fenêtre du navigateur.

Installez un arrière-plan fixe et centré, puis ajustez sa taille en utilisant Taille de l'arrière-plan: Couverture .

Html { 

Arrière-plan-image: URL (images / fond.jpg);

Contexte - Répéter: Non-répéter;

Colument de fond: centre central;

Fond-fixation: fixe;

-WebKit-fond-taille: couverture;

-Moz-fond-taille: couverture;

-O-fond-taille: couverture;

Taille de fond: couverture; 
} 

Démo

Cette méthode fonctionne dans

  • Chrome (n'importe quelle version)
  • Opera 10+.

Firefox 3.6+

Safari 3+.

IE 9+

Pour que les images ne se chargent rapidement, placez vos sites uniquement des fournisseurs d'hébergement éprouvés, par exemple, Beget.com 
Les utilisateurs et les moteurs de recherche aiment les sites rapides. 

Arrière-plan-image: URL (images / fond.jpg);

Méthode 2

Cette méthode prévoit l'utilisation de l'élément IMG, dont la taille variera en fonction de la taille de la fenêtre du navigateur. Pour étirer l'image en plein écran, il doit définir une hauteur et une largeur minimales avec une valeur de 100%. Et de sorte que l'image ne soit pas comprimée à la taille plus petite que l'original, installez min-largeur avec la valeur de la largeur égale de l'image.

Si la largeur de la fenêtre est inférieure à la largeur de l'image, la requête de support sera utilisée pour aligner l'arrière-plan au centre.

hériter.

<img src = "/ images / arrière-plan.jpg" class = "fond" />

img.background { Min-hauteur: 100%; Min-largeur: 640px; largeur: 100%; Hauteur: auto;

Position: fixe; TOP: 0; à gauche: 0;

/ * Dépend de la taille de l'image * /

@Media écran et (max-largeur: 640px) { img.bg { и À gauche: 50%; marge-gauche: -320px; } } } Démo

Hérite toutes les caractéristiques de l'élément parent

Cette méthode fonctionne dans:

Toute versions de bons navigateurs (chrome, opéra, firefox, safari) IE 9+ и Méthode 3. . Une autre manière est la suivante: corrigez l'image <img /> dans le coin supérieur gauche de la page et étiez-la à l'aide des propriétés min-largeur et min-hauteur de 100%, tout en maintenant le rapport de format. Vrai, avec cette approche, la photo n'est pas centrée. Mais ce problème est résolu en enveloppant la photo dans <div />, que nous faisons 2 fois la taille de la fenêtre. Et l'image elle-même que nous étirons et mis au centre. <div class = "fond"> <img src = "/ images / arrière-plan.jpg" />

</ div> Div.background { <div class = "fond"> Position: fixe;

TOP: -50%;

À gauche: -50%; } largeur: 200%; Hauteur: 200%; }

img { Position: absolu; TOP: 0;

à gauche: 0; Droite: 0; :

Bas: 0;

Marge: Auto; Min-largeur: 50%; Min-hauteur: 50%; } .

Cette méthode fonctionne dans de bons navigateurs et à savoir 8+.

J'espère que cette information sera utile pour vous. Personnellement, j'utilise souvent ces méthodes, notamment en premier. Il existe sûrement d'autres moyens de mettre une image sur le fond de la CSS. Si vous en savez à leur sujet, partagez, veuillez commenter. Définir la couleur de fond et / ou une image pour une page ou un élément séparé est suffisamment simple. La principale chose est de savoir où et comment cela peut être fait, ainsi que d'avoir un code de couleur et / ou une image d'arrière-plan. Il est possible que de cet article, vous apprendrez beaucoup de nouvelles choses, mais je l'ai créée spécifiquement pour les débutants. Par conséquent, tout sera aussi court que possible et en détail simultanément. L'essentiel est que vous recevrez non seulement les exemples de présentation générale et de prêts à l'emploi, mais également à comprendre comment faire un arrière-plan en HTML. Pour définir l'arrière-plan dans HTML, utilisez le DOCTYPE intermédiaire Et je vais commencer par le fait que Html5. Il n'est pas possible de définir le fond du site. Cette fonctionnalité a été décidée de supporter en CSS. Par conséquent, si vous envisagez d'utiliser ci-dessous et que vous souhaitez obtenir un » (corriger) Code, vous devez rester au type de transition du document. Pour ce faire, votre page Web devrait commencer par la ligne suivante: <! DOCTYPE HTML Public "- // W3C // DTD HTML 4.01 » De transition // fr "" http://www.w3.org/tr/html4/loose.dtd ">

Temps pour les classes pratiques

Comment est l'arrière-plan sur une page Web? (#)Si vous l'avez compris, commençons à comprendre comment le fond est créé. Et la première chose ici devrait être notée - c'est la différence entre

Couleur de l'arrière plan

Image de fond

. Au début va

Couleur de l'arrière plan À gauche: 50%; qui inonde tout espace de page disponible ou son élément. Le répété sur le dessus image de fond }

. Visuellement, cela peut être décrit comme suit: Position: absolu; TOP: 0;

Contexte du document HTML et ses éléments

Après avoir décevé les principaux éléments du contrôle de toile de fond, ainsi que leurs attributs, procédez directement à l'analyse d'un exemple spécifique. Dans le code de programme ci-dessous, j'ai essayé d'activer tous les éléments décrits.

La deuxième chose que vous devez savoir est la différence entre

Corps du document Droite: 0; :

élément du document

Corps du document

indiqué dans le code HTML de la balise de page Web

Corps. qui comprend tout le contenu de la page Web. De toute évidence, le fond du document du document ne peut être transparent. Si l'arrière-plan du corps du document n'est pas spécifié, la valeur par défaut spécifiée dans les paramètres du navigateur est utilisée. Éléments de page sont à l'intérieur de la balise }

. Il est à noter que vous pouvez définir la couleur et / ou l'image d'arrière-plan à l'aide de HTML sur tous les éléments du document. Par exemple, l'image d'arrière-plan ne peut être spécifiée que pour les tables. Par défaut, ils ont généralement un fond transparent. Position: absolu; TOP: 0;

Attribut BGColor pour créer une couleur d'arrière-plan

Pour demander

Le document ou ses éléments est l'attribut utilisé Hauteur: 200%; и image de fond bgcolor , par exemple: <Corps bgcolor = "# EC008C">

<! - Corps de document ->

</ Corps>

Dans ce cas, nous définissons la couleur de fond de la page dans son ensemble. Mais un exemple de la manière de définir la couleur de fond pour la table, dans la balise Tableau <Table BGColor = "# EC008C"> <tr> <TD> Texte avec fond </ td> </ tr> </ Table>

Il est à noter que la couleur de fond dans la table peut également être spécifiée pour les lignes de la balise

T Et pour leurs cellules dans la balise Td.

Comment trouver le code de couleur? Vous avez probablement déjà remarqué que la couleur dans HTML est définie sur spécial code Html. , par exemple:

# EC008C.

  • . Pour connaître le code dont vous avez besoin de la couleur, vous pouvez utiliser l'un des éditeurs graphiques. Par exemple, dans Photoshop, vous pouvez utiliser "
  • Outil pipette.
  • (Pipette)

Obtenir une couleur d'un point de la photo. Ensuite, vous devez cliquer sur la couleur résultante de la barre d'outils et dans la fenêtre qui s'ouvre "

Pipette à couleurs (Sélection de couleur) Copier le code de couleur. J'attire votre attention sur le fait que ce code sera sans signe de treillis Au début, ce signe devra être ajouté manuellement.

Vous pouvez également utiliser de nombreux services en ligne, par exemple: 
Leur principe de travail est encore plus facile - cliquez sur la couleur souhaitée et obtenez le code informatique. Attribut Fond pour créer une image d'arrière-plan Ainsi que dans le cas de la couleur de fond et dans le cas de
Vous devez utiliser un attribut spécial, nommément 
Contexte. 
<fond de corps = "/ 2014/06 / bg.jpg">

В Html. Dans ce cas, nous demandons la photo de fond de la page dans son ensemble. Il est remarquable qu'en raison des limitations de la taille de l'image, il sera répété, par exemple: Comme vous le voyez, lorsque la répétition, la transition entre les images est perceptible. Par conséquent, des images spéciales sont souvent utilisées, où ce moment est pris en compte. Mais un exemple de comment définir une image de fond pour une table, dans la balise

<fond de table = "/ 2014/06 / bg.jpg"> <tr> <td> texte avec fond </ td> </ tr> </ table> Html. Il convient de noter que la photo d'arrière-plan ne peut être définie que pour la table dans son ensemble et / ou sa cellule distincte. Pour une chaîne, cela ne fonctionnera pas. Attribut Fond pour créer une image d'arrière-plan .

Chemin absolu et relatif sur la photo de fond (Sélection de couleur) Vaut la peine de payer séparément Image de fond d'adresse . Dans ce cas, le chemin relatif de la photo est utilisé, c'est-à-dire L'adresse est indiquée sur l'emplacement du fichier image sur le fichier de page Web. Cette option ne peut pas être appelée particulièrement réussie. Il est préférable d'utiliser le chemin absolu sur la photo, c'est-à-dire

Son URL complète <fond de corps = "/ images / bg.jpg"> .

Dans ce cas, vous n'aurez pas de problèmes concomitants. Pour plus de choses à ce sujet, vous pouvez lire ici.

Résumons 
En utilisant des attributs moralement obsolète, car pour la validité du code HTML, vous devrez utiliser la transition DOCTYPE.

. Pour définir la couleur d'arrière-plan dans HTML, utilise des codes spéciaux que vous pouvez trouver dans un éditeur graphique ou utiliser des services en ligne spéciaux. L'image de fond est dupliquée dans la queue de la zone allouée et se trouve sur la couleur de fond. Pour spécifier une image d'arrière-plan, il est préférable d'utiliser son URL complète. J'ai tout sur ceci. Merci pour l'attention. Bonne chance!

Lien court: http://goo.gl/03tsnz Comment faire un arrière-plan pour le site? Toute chambre sera beaucoup mieux meilleure si son sol monte chère tapis persan. Donc, le pire votre site? Peut-être que c'est l'heure et son étage " ensemble
  • »Palais à la main élégant cher. Nous comprendrons plus sur la façon de faire un arrière-plan pour le site:
  • Il arrive que l'ancien design du site est déjà venu. Et je veux quelque chose de nouveau et savoureux. Et le nouveau design 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 à propos de cela. "
  • ajusté

" mains. Par conséquent, il est plus facile de rafraîchir l'ancien gabarit en 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 opportunités. 
CSS. ou alors . Mais de nombreuses propriétés de travail avec l'arrière-plan ont le même nom et la même méthodologie d'application dans ces technologies Web.
  • 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 régler la couleur de l'arrière-plan arrière du site, la propriété est utilisée.

Couleur de l'arrière plan.

Attribut de style 

Style. . C'est-à-dire pour définir la couleur de base de la page Web, vous devez l'enregistrer à l'intérieur de la balise <corps>. Par example: <Style de corps = "Couleur de fond: # 55D52B"> <p> fond du site # 55d52b </ p> </ corps>

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

Rvb. 

. Exemples:

<Style de corps = "Couleur de l'arrière-plan: RVB (51.255.153)"> <p> Contexte du site Web RVB (23,113,44) </ P> </ corps> <Style de corps = "Couleur de l'arrière-plan: vert"> <p> fond du site vert </ p> </ corps> 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.

Les 16 mots-clés totaux sont pris en charge 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

Il est préférable d'utiliser un format hexadécimal ou 

En plus de la sélection de la couleur, d'autres paramètres sont disponibles. Si propriété Fixer la valeur Transparent

Le fond de la page deviendra transparent. Cette valeur est attribuée à cette propriété par défaut. Envisagez maintenant de la possibilité d'une langue hypertext pour installer le motif de fond du site. Il est possible de le faire en utilisant la propriété. image de fond.

Exemple: 

<Style de corps = "fond-image: URL (img_1809.jpg)"> </ corps>

Comme on peut le voir à partir du code, la liaison d'image se produit via le chemin

URL

Publié entre parenthèses. 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. Faites-le en utilisant la propriété

Répétition du fond. . Valeurs possibles: répétition-x - répétition de l'image d'arrière-plan horizontalement;

Nous facilitons donc la tâche de régler l'arrière-plan de deux images: animation et image régulière. Dans ce cas, l'animation GIF sera corrigée et le dessin est défilé avec le contenu de la page.

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:

<Style de corps = "fond-image: URL (3.jpg); arrière-plan-répéter: non-répéter"> </ corps>

Mais, bien sûr, il est préférable que notre location est située au milieu de l'écran. Propriété

Position de fond Il est juste destiné à positionner le motif de fond sur la page. Définissez les coordonnées de localisation de plusieurs manières:
. C'est-à-dire pour définir la couleur de base de la page Web, vous devez l'enregistrer à l'intérieur de la balise <corps>. Par example: Mot-clé (
<fond de corps = "/ images / bg.jpg"> Haut, bas, centre, gauche, droite)
ou alors Pourcentages - le compte à rebours commence à partir du coin supérieur gauche;
Toute chambre sera beaucoup mieux meilleure si son sol monte chère tapis persan. Donc, le pire votre site? Peut-être que c'est l'heure et son étage " En unités de mesure (
(Sélection de couleur) Pixels
). Nous utilisons l'option la plus simple pour centrer:

<Style de corps = "arrière-plan-image: URL (3.jpg); arrière-plan-répéter: non répétée; position de fond: centre supérieur"> </ corps>

Il arrive que vous devez fixer la position du dessin lors du défilement. Par conséquent, avant de faire une photo du site, utilisez une propriété spéciale.

fond d'arrière-plan.

. Valeurs valides: <UL> <LI> Scroll; </ Li> <li> corrigé. </ Li> </ ul>

Nous avons besoin de la dernière signification. Maintenant, le code de notre exemple ressemblera à ceci: [/ html] 
<style de corps = "arrière-plan-image: URL (3.jpg); répétition - répétition: non répétée; position arrière-plan: centre supérieur; fond d'arrière-plan: fixe"> </ corps> 

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 avec connexion à grande vitesse avec Internet. Mais qu'en est-il de l'Internet mobile, lors de l'utilisation du téléchargement de plusieurs "

mètre

"Va prendre beaucoup de temps?

"Va prendre beaucoup de temps? Tous ces problèmes sont résolus à l'aide d'un fond de texture. Il utilise une petite image comme modèle de texture. Même sous la condition de sa répétition multiple, le motif n'est chargé qu'une seule fois.

Créer un fond sombre pour le site aller à Corps. Photoshop. Corps. Créez une image sous la forme d'une bande d'un long pixel de 1200 pixels et d'une largeur de 15 pixels. Ensuite, nous utilisons un simple gradient noir et blanc et connectons la texture résultante à la page du site:

<Style de corps = "arrière-plan-image: URL (1.png); Couleur: RVB (0,51,204)"> </ corps>

Pour plus de clarté, nous avons ajouté du texte et définissez la couleur de la propriété à l'aide de la propriété. Corps. Couleur Corps. . Cest ce qui est arrivé:

  • Hauteur: 200%; Toutes les propriétés décrites ci-dessus sont également applicables aux feuilles de style en cascade. Créer un fond du site
  • image de fond CSS.
  • En réécrivant le code de l'un de nos exemples précédents: <Head> <Titre> Document Untitled </ Titre> <Type de style = "Texte / CSS"> Corps {Fond-Image: URL (3.jpg); Contexte-répéter: Non-REPEAT; Fond-Position: Centre supérieur; Contexte de fond: fixe;} </ style> </ tête> <corps> </ corps>
  • Le résultat sera similaire. Eh bien, nous avons examiné toutes les options, comment changer l'arrière-plan sur le site. Maintenant, il reste seulement de créer un dessin du futur tapis et de la diffuser sur les pages de votre ressource. Mais c'est ta main.
  • Bonne journée à tous pour apprendre et apprendre quelque chose de nouveau! Avez-vous déjà attiré l'attention sur l'apparition de sites lorsque le développement des créateurs a été paresseux pour organiser le fond des pages? Et j'ai tourné. Ça a l'air d'abattre. Souvent, en raison de l'absence de séparations habituelles entre différents types d'informations, il est mélangé et disparaît simplement le désir d'examiner davantage une telle ressource Web. Donc, ce problème est arrivé à votre projet, j'ai décidé d'écrire un article sur le sujet: "Comment faire un fond de pages dans HTML". Après avoir lu la publication, vous apprendrez, avec quels outils vous pouvez définir la conception de l'arrière-plan, comment faire un arrière-plan fixé ou changeant, ce qui contribuera à rendre votre site Web attrayant. Maintenant commençons!
  • Outils de base pour définir les pages Web de fond Pour définir l'image d'arrière-plan, les développeurs de langue Web ont fourni un antécédent d'attributs. Il est disponible en HTML et CSS.
  • Dans la langue de balisage, il s'agit d'un attribut de la balise corporelle et dans les tables de style - une propriété universelle qui vous permet de configurer jusqu'à 5 caractéristiques du plan arrière en même temps. L'arrière-plan est un élément assez flexible qui peut être utilisé pour tâche de l'arrière-plan en tant que couleur, image de couleur ou même animation. Donc, pour installer l'image d'arrière-plan via l'unité HTML <Corps> Il suffit d'écrire un tel code:
  • <Body Fond = "Adresse de fichier"> ... </ corps> Et au lieu des mots "Adresse de fichier" Insérez le chemin de la photo.
  • Cependant, remarquez! Si, sous la forme de l'arrière-plan, vous souhaitez voir une toile de monochon spécifiée à partir de la palette de couleurs, celle-ci est effectuée à l'aide de l'attribut BGColor. Par exemple, <corps bgcolor = "# 000000"> ... </ corps>, nous avons demandé à un fond noir pour notre site.
  • Les couleurs dans CSS et HTML sont définies soit par un mot anglais (par exemple, rouge), soit un code spécial composé d'un signe # et de six caractères après elle (par exemple, # FFDAB9). Lors de la saisie d'une deuxième option dans des logiciels spécialisés pour les développeurs, la palette apparaîtra automatiquement devant vous. Si vous venez de commencer à apprendre ces langages Web, le code de couleur peut être incliné sur Internet.

Contexte en tant que propriété dans les tables de style cascade Hauteur: 200%; :

Il est défini ou dans un fichier séparé avec des styles CSS ou dans l'élément <style>. Avec cette propriété, vous pouvez installer des motifs de fond ou une couleur, spécifier l'emplacement de départ de la page, définir des images récurrentes et fixes. Pour plus de clarté, j'ai effectué des définitions dans la table. 

Paramètres Objectif

Utilisé pour installer une image fixe ou défilée avec le contenu du site. Arrive fixe, faites défiler et hériter

Définit l'image d'arrière-plan. Il peut être indiqué simultanément avec la couleur. Ensuite, ce dernier sera affiché jusqu'à ce que l'image soit complètement chargée.

Définit l'emplacement initial de l'objet pour le paramètre précédent. Indique horizontalement, gauche et centre, et verticalement - bas, haut et centre. De plus, vous pouvez hériter de la position (hériter), définie en pourcentage, pixels et autres dimensions. 

Appliquez lorsque vous utilisez l'attribut de fond-image. Régule comment l'image sera répétée. Vous pouvez spécifier 2 valeurs: pour horizontale et verticale. Il existe des caractéristiques: non-répéter, répéter, répéter-x, répéter-y, hériter, espace

Добавить комментарий