information brève

Versions CSS

Valeurs

url La valeur est le chemin d'accès au fichier graphique, qui est spécifié dans la construction url(). Le chemin d'accès au fichier peut être écrit soit entre guillemets (doubles ou simples), soit sans eux. none Désactive l'image d'arrière-plan de l'élément. hériter Hérite de la valeur du parent.

HTML5 CSS2.1 IE Cr Op Sa Fx

Modèle objet

document.getElementById("elementID ").style.backgroundImage

Navigateurs

Les versions d'Internet Explorer jusqu'à la version 7.0 incluse appliquent un arrière-plan à la bordure intérieure d'un élément dont la propriété hasLayout est définie. Si l'élément n'a pas de hasLayout , la propriété background-image respectera les bordures de l'élément, comme spécifié dans la spécification. La différence d'affichage sera perceptible si les bordures sont en pointillés ou en pointillés plutôt que pleines.

Si l'élément est défini sur scroll ou auto , Internet Explorer 8 aura un délai vertical d'un pixel lors du défilement de l'arrière-plan.

Les versions d'Internet Explorer jusqu'à 7.0 inclus ne prennent pas en charge la valeur d'héritage.

Si l'arrière-plan est défini pour une ligne de tableau (balise ), puis Chrome, Safari, iOS ne l'affichent pas comme le prescrit la spécification, à savoir pour chaque cellule séparément. Alors que le navigateur doit afficher un arrière-plan uni pour toute la ligne. L'exemple 2 montre le code illustrant l'erreur.

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

Le résultat de cet exemple dans le navigateur Chrome est présenté dans la Fig. 1. Les navigateurs Internet Explorer, Opera et Firefox affichent correctement l'arrière-plan de la ligne (Fig. 2).

Riz. 1. Répétez l'arrière-plan pour chaque cellule

Riz. 2. Contexte de toute la ligne

Lors de la création d’un site Web, outre la fonctionnalité, le design est très important. C’est ce qui définit le style et le design d’une entreprise ou d’une personne particulière pour laquelle le site Web 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 votre fichier HTML à l'aide du 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 connaître les couleurs pour 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 faisant un clic droit dessus, en sélectionnant « 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 pour les utilisateurs disposant d'une résolution d'écran plus élevée, 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 avec le nombre maximum de 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.

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 qu'il n'y a pas d'options spéciales pour la créativité ici, passons donc aux styles et voyons ce qui peut être fait en utilisant 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 cet exemple, le graphique target.gif est défini comme arrière-plan de la 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 une bande verticale le long du bord gauche (Fig. 2), vous aurez besoin de l'image présentée sur la Fig. 3.

La conception doit être telle qu'elle s'emboîte verticalement sans coutures visibles et qu'elle forme également un tout avec la couleur d'arrière-plan spécifiée 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. N'oubliez pas non plus qu'un dessin volumineux augmentera 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éter l'arrière-plan horizontalement

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, le dessin peut être déplacé horizontalement et verticalement depuis sa position d'origine, par défaut il s'agit du coin supérieur gauche de l'é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. Il est individuel dans chaque cas et est généralement égal à la largeur de l'image plus l'espace souhaité entre l'image et le texte.

Les navigateurs modernes vous permettent d'ajouter un nombre arbitraire d'images d'arrière-plan à un élément, en répertoriant les paramètres de chaque arrière-plan séparés par des virgules. Il suffit d'utiliser la propriété universelle background et de spécifier un premier arrière-plan et un deuxième séparé par une virgule.

Comment étirer le fond sur toute la largeur de la fenêtre ?

Pour redimensionner l'arrière-plan, utilisez la propriété background-size ; définissez sa valeur sur 100 %, l'arrière-plan occupera alors toute la largeur de la fenêtre du navigateur. Pour les anciennes versions des navigateurs, vous devez utiliser des propriétés spécifiques avec des préfixes, comme indiqué dans l'exemple 1.

Comment ajouter une image de fond à une page Web ?

Pour ajouter une image d'arrière-plan à une page Web, définissez le chemin d'accès à l'image dans la valeur URL de la propriété de style d'arrière-plan, qui à son tour est ajoutée au sélecteur de corps.

Est-il possible de faire un fond animé ?

L'animation est une technique assez puissante qui peut donner vie à n'importe quel document, il n'est donc pas surprenant que la technologie Flash, qui ajoute des dessins animés aux pages Web, et qui plus est interactives, soit devenue extrêmement populaire. Le format graphique GIF prend également en charge une animation simple en changeant séquentiellement les images. Ainsi, en utilisant une image dans ce format, il est possible d'animer non seulement des images individuelles, mais également l'arrière-plan d'une page Web ou un élément spécifique.

Tout d'abord, vous devrez créer une image animée au format GIF, pour laquelle vous pourrez utiliser Adobe Photoshop ou un autre programme adapté à cet effet. 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 comme arrière-plan à l'aide de la propriété de style d'arrière-plan, comme indiqué dans l'exemple 1.

Comment mettre une image de fond dans le coin inférieur droit de la page ?

Pour contrôler la position de l'image d'arrière-plan sur la page, la propriété de style background-position est utilisée ; elle définit simultanément les coordonnées horizontales et verticales de l'image. Pour annuler la répétition d'une image d'arrière-plan, utilisez la propriété background-position avec la valeur no-repeat .

Comment puis-je empêcher l’arrière-plan de se répéter ?

Par défaut, l'image d'arrière-plan est répétée horizontalement et verticalement, formant une mosaïque sur tout le champ de la page Web. Cependant, ce comportement d'arrière-plan n'est pas toujours requis, en particulier lors du placement d'une seule image. Il sera donc utile d'ajouter une valeur de non-répétition à la propriété de style d'arrière-plan.

Comment puis-je faire en sorte que l’arrière-plan se répète uniquement verticalement ?

La répétition de l'arrière-plan est généralement nécessaire pour créer des lignes décoratives ou des dégradés liés à la hauteur d'un élément ou d'une fenêtre de page Web. Dans de tels cas, répéter l’arrière-plan verticalement fournit une image cohérente, quelle que soit la taille des éléments. Ce n'est qu'au début que vous devez vous assurer que l'image d'arrière-plan est répétée sans coutures.

27/12/14 56,3K

N'importe quelle pièce sera bien meilleure si son sol est recouvert d'un tapis persan coûteux. Alors pourquoi votre site Web est-il pire ? Il est peut-être temps de « recouvrir » son sol d’un tapis fait main coûteux et élégant. Examinons de plus près comment créer un arrière-plan pour un site Web :

Contexte du site

Il arrive que l’ancienne conception du site Web soit devenue ennuyeuse. Et je veux quelque chose de nouveau et de savoureux. Et le nouveau design sera le même si vous le réalisez vous-même.

Mais changer complètement la conception d'une ressource par vous-même est une tâche ingrate. Et tout le monde n’a pas les mains correctement entraînées pour cette tâche. Par conséquent, le moyen le plus simple d'actualiser un ancien modèle consiste à modifier la couleur d'arrière-plan de la ressource ou son image d'arrière-plan.

Il existe plusieurs façons de modifier l’arrière-plan d’un site Web. Pour cela, les capacités du CSS ou du HTML sont utilisées. Mais de nombreuses propriétés permettant de travailler en arrière-plan ont le même nom et la même méthode d'application dans ces technologies Web.

Bases du travail avec les arrière-plans en HTML

Plusieurs éléments peuvent servir de fond :

• Couleur;
• Image de fond;
• Image texturée.

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

Pour définir la couleur d'arrière-plan d'un site, utilisez la propriété background-color de l'attribut style. Autrement dit, pour définir la couleur principale d'une page Web, vous devez l'écrire à l'intérieur de la balise . Par exemple:

Fond de site Web #55D52B

En plus du code couleur hexadécimal, une valeur au format mot-clé ou RVB est prise en charge. Exemples:

Arrière-plan du site Web RVB(23 113,44)

Fond de site Web vert

La définition de la couleur d'arrière-plan à l'aide de mots-clés présente un certain nombre de limitations par rapport aux deux autres méthodes.

HTML ne prend en charge que 16 mots-clés pour définir les couleurs. En voici quelques-uns : blanc, rouge, bleu, noir, jaune et d'autres.

Par conséquent, afin de définir l'arrière-plan d'un site HTML, il est préférable d'utiliser le format hexadécimal ou RVB.

En plus de la sélection des couleurs, d'autres options de personnalisation sont disponibles. Si la propriété background-color est définie sur transparent , l'arrière-plan de la page deviendra transparent. Cette valeur est attribuée à cette propriété par défaut.

Voyons maintenant les capacités du langage hypertexte pour définir une image de fond pour un site. Cela peut être fait en utilisant la propriété background-image.

Comme vous pouvez le voir dans le code, l'image est liée via le chemin URL spécifié entre parenthèses. Mais toutes les images ne sont pas si grandes que leur taille remplit toute la zone de l’écran. Voyons comment la plus petite image sera affichée.

Supposons que nous développions un site Web sur la poésie et que nous devions utiliser une image de Pégase comme arrière-plan. Le cheval ailé incarnera la liberté de la pensée créatrice du poète !

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

Peut-être que quatre chevaux souriants et ailés seront trop d'inspiration pour les poètes. Par conséquent, nous interdisons le clonage de notre Pegasus. Nous faisons cela en utilisant la propriété background-repeat. Valeurs possibles:

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

Parmi les options listées, nous nous intéressons à la dernière. Avant de changer le fond du site, nous l'utilisons dans notre code :

Mais bien sûr, ce serait mieux si notre dépliant était situé au milieu de l’écran. La propriété background-position est justement destinée au positionnement de l'image de fond sur la page. Vous pouvez définir les coordonnées de localisation de plusieurs manières :

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

Utilisons l'option de centrage la plus simple :

Il arrive que vous deviez fixer la position d'une image lors du défilement. Par conséquent, avant de créer une image comme arrière-plan du site, utilisez la propriété spéciale background-attachment . Les valeurs qu'il accepte sont :

• faire défiler;


• fixé.

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

Fond de texture de site Web

Dans le premier exemple, nous avons utilisé un grand et magnifique paysage désertique comme arrière-plan. Mais pour une telle beauté, il faut payer intégralement. Le poids d'une image réalisée en haute qualité peut atteindre plusieurs mégaoctets.

Ce volume n'affecte en rien la vitesse de chargement des pages du navigateur disposant d'une connexion Internet haut débit. Mais qu'en est-il de l'Internet mobile, lors de son utilisation, le chargement de plusieurs « compteurs » prendra beaucoup de temps ?