Bonjour, chers lecteurs du site blog. Aujourd'hui, nous examinerons cinq règles CSS qui vous permettent de définir un arrière-plan pour n'importe quel élément en HTML - position d'arrière-plan (image, répétition, couleur, pièce jointe). Eh bien, n’oublions pas non plus de mentionner la règle composée de fond.

Il n'y a rien de compliqué à cela, mais il y a certaines subtilités et nuances que vous devez connaître à propos d'un modèle prêt à l'emploi (rappelez-vous, ce qui aidera à révéler tous les tenants et aboutissants de toute conception).

Permettez-moi de vous rappeler encore une fois que cet article fait partie d'une série et qu'il serait préférable de commencer à étudier le balisage de style dès le début, à savoir avec un article sur ce qu'est le CSS et avec quoi il est utilisé, puis de suivre dans l'ordre indiqué dans l'ouvrage de référence. Bien que, dans tous les cas, cela dépend de vous, parlons maintenant de la définition de l'arrière-plan.

Couleur, couleur d'arrière-plan et image d'arrière-plan

Voyons d'abord comment définir la couleur des éléments HTML à l'aide de Règles de couleur CSS. En fait, tout est simple ici. La syntaxe est tout à fait normale et vous pouvez définir la couleur conformément à la façon dont elle a été effectuée dans le langage de balisage hypertexte. Comme vous vous en souvenez, placé après le signe dièse (hachage - "#fe35a3"), ou en utilisant trois chiffres, si le premier coïncide avec la valeur du deuxième, le troisième avec le quatrième et le cinquième, respectivement, avec le sixième ( le code couleur « #aa33ff » peut être brièvement écrit « a3f »).

Aussi, les couleurs dans le code Html et Css peuvent être représentées sous forme de mots (par exemple « rouge »), mais le plus souvent c'est le code hexadécimal qui est utilisé :

Couleur:#303

A titre d'exemple, j'ai coloré ce petit paragraphe de la même couleur que ci-dessus (#303). C'est maintenant une couleur légèrement différente de tous les autres paragraphes (plus foncés), qui est définie sur #555 dans le fichier CSS du thème WordPress que j'utilise. Mais définir la couleur à l'aide de la couleur est assez simple, mais avec l'arrière-plan ce sera un peu plus compliqué.

Donc, pour l'arrière-plan en CSS Il existe cinq règles qui peuvent être combinées en une seule si vous le souhaitez. Pour les voir, vous pouvez accéder à la page actuelle des spécifications du W3C et rechercher tout ce qui contient le mot Contexte :

1. couleur d'arrière-plan - en utilisant cette règle, vous définissez la couleur d'arrière-plan de n'importe quel élément HTML. Vous pouvez utiliser soit un code, soit le nom de la teinte, c'est-à-dire tout est exactement le même que lors de l’utilisation de la couleur.

image d'arrière-plan - avec elle, vous pouvez utiliser une image comme arrière-plan (mais assurez-vous de la lire, car les images lourdes ralentiront le chargement des pages), dont le chemin d'accès sera indiqué dans la fonctionnalité url ().

Si vous regardez les spécifications, vous verrez que couleur d'arrière-plan par défaut tout élément sera transparent (la valeur par défaut de la règle est « background-color:transparent »). Certes, dans les éléments, il ne sera pas transparent par défaut, car Ce sont des éléments du système et tout ce qui les concerne est différent et différent des balises ordinaires du langage de balisage hypertexte.

La couleur de background-color est définie par défaut (six ou trois chiffres du code hexadécimal, ou un mot) :

Couleur de fond : #FEFCDE

Par exemple, l'arrière-plan de ce paragraphe est spécifié à l'aide de background-color avec le code couleur donné juste au-dessus.

Les quatre autres règles CSS concerneront uniquement l'image d'arrière-plan, qui peut être définie pour n'importe quel élément HTML et, si vous le souhaitez, positionnée avec précision. Le fichier graphique qui sera utilisé peut être spécifié en utilisant image d'arrière-plan.

Si vous regardez la spécification du langage de balisage, vous verrez que background-image vaut par défaut "none" (c'est-à-dire qu'aucune image n'est utilisée pour l'arrière-plan). Eh bien, si vous en avez toujours besoin, alors dans la fonctionnalité url(), vous devrez indiquer le chemin d'accès :

Image d'arrière-plan:url(https://site/image/comment_top_focus.gif);

Par exemple, pour ce paragraphe j'ai utilisé un fichier graphique avec un fond dont le chemin d'accès est décrit juste au dessus. Vous voyez que toute la zone allouée à ce paragraphe est recouverte d'une image répétitive, qui dans l'original ressemble à ceci :

Ceux. lors de l'utilisation d'une seule règle d'image de fond indiquant le chemin d'accès au fichier graphique, cette même image sera multipliée verticalement et horizontalement jusqu'à couvrir toute la surface allouée sur la page Web pour cet élément HTML spécifique (dans notre exemple, c'était un paragraphe). Pourquoi cela se produit-il ?

Répéter l'arrière-plan - répéter l'image d'arrière-plan

Oui, car nous n'avons spécifié aucune valeur pour la règle CSS répétition en arrière-plan, ce qui signifie que la valeur par défaut sera utilisée pour cela. En regardant le cahier des charges, on découvre que cette valeur correspond à « répéter » (répéter l'image sur tous les axes). La réponse est venue naturellement.

Par conséquent, avec la répétition en arrière-plan, nous pouvons gérer les répétitions de l'image d'arrière-plan. Cette règle ne peut avoir que quatre significations :




Position d'arrière-plan - positionnement en arrière-plan

Maintenant la question se pose : est-il possible d'éloigner l'image de fond du coin supérieur gauche de la zone limitant la taille de l'élément. Bien sûr que vous le pouvez, et il existe une règle distincte à cet effet. position d'arrière-plan:



En regardant la spécification CSS, il devient clair pourquoi l'image d'arrière-plan par défaut est pressée exactement contre le bord supérieur gauche de la zone de l'élément HTML. Parce que "0% 0%" est la valeur par défaut de la règle de position en arrière-plan.

Eh bien, lorsque cette règle n'est pas explicitement définie pour un élément (comme dans notre cas), alors le navigateur sélectionne sa valeur, qui est acceptée par défaut dans la spécification (notez que les axes de coordonnées en CSS sont signalés exactement à partir du bord supérieur gauche de l'élément de zone).

Il ressort également clairement de la spécification que pour positionner l'image d'arrière-plan à l'aide de background-position, vous pouvez utiliser à la fois des valeurs relatives (pourcentages) et absolues (par exemple, ). Eh bien, vous pouvez aussi utiliser des mots qui correspondront à certaines valeurs numériques. Mais tout d’abord.

Lors du réglage du positionnement de l’image d’arrière-plan en utilisant des unités absolues en background-position le principe suivant est utilisé pour déterminer sa position finale :

Ceux. le navigateur calculera les décalages spécifiés le long des axes X et Y depuis l'origine de la zone dans laquelle l'objet est positionné jusqu'à l'origine de cette image elle-même. Par exemple, dans ce paragraphe, j'ai positionné l'image d'arrière-plan via la position d'arrière-plan en utilisant les règles CSS suivantes :

Image d'arrière-plan:url(https://site/image/logo.png); répétition d'arrière-plan : pas de répétition ; position d'arrière-plan : 400px 25px ;

Attention, dans ce cas, il sera aligné au centre de la zone de visualisation, et non au centre de la zone allouée à ces paragraphes. Il est clair qu'en réalité, il est peu probable qu'un tel placement d'image d'arrière-plan soit utilisé.

Cependant, si vous définissez une position d'arrière-plan fixe pour des éléments tels que Body ou Html (c'est-à-dire dans des balises qui couvrent toute la page Web), alors cette image sera toujours visible dans la fenêtre et c'est précisément l'utilisation de la pièce jointe d'arrière-plan CSS. propriété dans une disposition en bloc moderne.

Il y a plus règle préfabriquée Fond, qui vous permet de combiner les cinq règles décrites ci-dessus dans une seule bouteille. De plus, les valeurs des cinq dans la version combinée peuvent être utilisées dans n'importe quel ordre et en n'importe quelle quantité (elles sont uniques et le navigateur ne les confondra pas). Tout ce que vous ne spécifiez pas explicitement sera considéré comme la valeur par défaut par le navigateur.

Png) pas de répétition 50 % ;

L'exemple de règle préfabriquée est appliqué à ce paragraphe pour plus de clarté. Cela ne s’est pas très bien passé, mais ce n’est pas le principal. Ce paragraphe utilise un étrange fond jaune et utilise également une image du logo Liveinternet, alignée au centre du paragraphe. Parce que Si la règle de pièce jointe en arrière-plan ne reçoit aucune valeur, alors la valeur de défilement (la valeur par défaut) est utilisée.

Si pour un élément vous souhaitez définir uniquement un remplissage de couleur et ne pas vous soucier d'une image d'arrière-plan, vous pouvez le faire à la place :

Couleur de fond : #FEFCDE

écrire:

Contexte :#FEFCDE

Parce que toutes les autres valeurs de la règle préfabriquée seront prises par défaut, et c'est ce dont vous aviez besoin.

Bonne chance à vous ! A bientôt sur les pages du site blog

Vous pouvez regarder plus de vidéos en allant sur

");">


Vous pourriez être intéressé

Style de liste (type, image, position) - Règles CSS pour personnaliser l'apparence des listes en code Html Comment configurer la couleur d'arrière-plan alternée des lignes de tableaux, listes et autres éléments HTML du site à l'aide de la pseudo-classe nième enfant
Position (absolue, relative et fixe) - façons de positionner les éléments HTML en CSS (règles gauche, droite, haut et bas)
Flotter et effacer en CSS - outils de mise en page de blocs
Positionnement à l'aide de la règle Z-index et CSS Cursor pour changer le curseur de la souris

Avec l'aide Couleur et arrière-plan CSS Vous pouvez l'attribuer à presque n'importe quel élément d'une page Web, contrôler librement l'image d'arrière-plan et sa répétition horizontalement et verticalement. De plus, en utilisant CSS, vous pouvez placer une image d'arrière-plan n'importe où sur l'écran en utilisant le positionnement. N'allons pas trop loin pour l'instant, procédons dans l'ordre.

Propriété COULEUR

Cette propriété spécifie la couleur de l'élément, ou plus précisément, la couleur du texte à l'intérieur de l'élément. La valeur est spécifiée sous l'une des formes possibles :

• nom de la couleur (VERT, NOIR, ROUGE...) ;
• code couleur hexadécimal (008000, 000000, FF0000...) ;
• code couleur décimal en RVB (couleur : rvb (40, 175, 250) );

La propriété COLOR est héritée et si une valeur n'est définie pour aucun élément, la valeur est héritée de son ancêtre. Mais il peut arriver qu'il ne soit pas non plus défini pour l'ancêtre - alors la feuille de style du navigateur sera appliquée en utilisant les valeurs par défaut. La couleur de l'élément dans ce cas sera très probablement noire.

Comme je l'ai déjà mentionné, vous pouvez définir une couleur pour presque tous les éléments, ceux-ci peuvent être (H1... H6), (strong, em) et même des entiers (p) et même des bordures de tableau, mais nous y reviendrons plus tard.

Regardons un exemple de définition de la couleur du texte à l'aide de CSS :

h1 (couleur : Bleu)

Dans cet exemple, tous les titres de premier niveau de la page Web seront bleus :

fort (couleur : rouge)

Dans ce cas, tout ce qui se trouve dans le texte de la page sera mis en évidence avec la balise fort, deviendra rouge.

Vous pouvez l'écrire comme ceci :

h1, p, fort (couleur : vert)

Ensuite, les titres de premier niveau, tous les paragraphes et tout ce qui est mis en évidence avec une balise seront verts.

Lorsqu'il devient nécessaire de surligner des titres de différentes couleurs, des sélecteurs de classe sont utilisés. Pour définir une classe en HTML, on utilise l'attribut classe, qui peut être appliqué à n’importe quel élément. Dans le code HTML vous devrez écrire :

classe="Bleu" > La couleur d'en-tête de cette classe sera bleue

Dans la feuille de style CSS, dans ce cas, on écrit une règle où le sélecteur sera l'élément H1, et via le point ( . ) nom de la classe :

h1.Bleu (couleur : bleu)

Dans les documents HTML, des sélecteurs par identifiant sont également utilisés, ils sont déterminés par l'attribut ; identifiant. Un identifiant est un attribut plus significatif ou prioritaire qu’une classe. Et si à la fois une classe et un identifiant sont spécifiés pour un élément dans le code HTML, alors le style d'identifiant sera appliqué. L'identifiant est indiqué par un signe dièse ( # ). Pour utiliser l'identifiant en code HTML, vous devrez écrire :

id="Bleu" > La couleur de l'en-tête de cet identifiant sera bleue

Dans la feuille de style tour à tour :

h1#Bleu (couleur : bleu )

Propriété COULEUR DE FOND

Cette propriété permet de définir la couleur d'arrière-plan de la page dans son ensemble, d'un paragraphe, d'un lien ou, en général, de tout élément HTML. Pour ce faire, la valeur de la propriété spécifie la couleur ou la valeur transparent(transparent). Le code du fond de page s'écrit :

corps (couleur de fond : aqua)

Dans ce cas, le fond de la page sera turquoise, et pour donner le fond à l'en-tête on écrit :

h1 (couleur de fond : jaune)

On obtient un fond jaune pour les titres de premier niveau.

Couleur et arrière-plan en CSS

Propriété RÉPÉTITION D'ARRIÈRE-PLAN

Cette propriété est utilisée lorsqu'elle est définie pour déterminer si elle se répétera horizontalement et verticalement. Valeurs valides :

• répéter- l'image est répétée verticalement et horizontalement ;
• répéter-x- l'image est répétée uniquement horizontalement ;
• répéter- l'image est répétée uniquement verticalement ;
• pas de répétition- l'image ne se répète pas.

Le code s'écrit ainsi :

p(
image d'arrière-plan : url ( adresse du fichier image) ;
répétition d'arrière-plan : répétition-x
}

Le texte de ce paragraphe sera au-dessus de l’image d’arrière-plan, qui sera positionnée horizontalement.

Propriété CONTEXTE-ATTACHEMENT

Cette propriété permet d'indiquer au navigateur si l'image de fond de la page doit défiler avec du texte ( rouleau) ou rester immobile ( fixé).

corps(
image d'arrière-plan : url ( adresse du fichier image) ;
répétition d'arrière-plan : répétition-x ;
background-attachment : corrigé
}

Dans ce cas, l’image de fond restera immobile.

Propriété CONTEXTE-POSITION

Cette propriété est utilisée pour positionner l'image par rapport à . Les valeurs sont précisées en pourcentages (%), en unités de longueur (cm, px), avec des mots-clés :

• Verticale:
• haut- le haut de l'image est aligné sur le bord supérieur de la page ou du bloc ;
• centre
• bas- le bas de l'image est aligné sur le bord inférieur de la page ou du bloc.
• Horizontal:
• gauche- le bord gauche de l'image est aligné avec le bord gauche de la page ou du bloc ;
• centre- le centre de l'image est aligné sur le centre de la page ou du bloc ;
• droite- le bord droit de l'image est aligné avec le bord droit de la page ou du bloc.

Nous écrivons un exemple de code en pourcentages, unités de longueur et mots-clés :

corps(
image d'arrière-plan : url ( adresse du fichier image) ;
position d'arrière-plan : 0% 0%
}

Corps (
image d'arrière-plan : url ( adresse du fichier image) ;
position d'arrière-plan : 10px 25cm
}

Corps (
image d'arrière-plan : url ( adresse du fichier image) ;
position d'arrière-plan : en haut au centre
}

Je pense qu'il n'y a pas un seul site où la propriété n'est pas utilisée Arrière-plan CSS. Il semblerait que quoi de plus simple que cette propriété ? Mais non, ses capacités sont bien plus larges que l'affectation habituelle d'une image ou d'une couleur comme arrière-plan d'une page. Certaines choses seront familières, tandis que d’autres seront probablement nouvelles pour beaucoup. Dans tous les cas, il sera utile de bien connaître le fonctionnement de l’arrière-plan.

CSS3 a apporté beaucoup de nouveautés à la propriété, comme la transparence et l'attribution de plusieurs images en arrière-plan, mais nous en parlerons ci-dessous, mais nous examinerons d'abord les bases de la propriété arrière-plan.

couleur d'arrière-plan

Je suis plus que sûr que vous avez déjà attribué la couleur d'arrière-plan plus d'une fois. Cela peut être fait en utilisant plusieurs types de notation : notation régulière (le nom de la couleur est utilisé), hexadécimale ou RVB. Chaque type est équivalent, utilisez celui que vous préférez. J'essaie d'utiliser l'option la plus courte et pour une perception plus facile, le fichier de style résultant est un peu plus petit.

P (couleur d'arrière-plan : rouge ;) p (couleur d'arrière-plan : #f00 ;) p (couleur d'arrière-plan : #ff0000 ;) p (couleur d'arrière-plan : rgb(255, 0, 0;))

CSS3 prend en charge la transparence, nous pouvons donc l'ajouter à notre couleur, par exemple comme ceci :

P (couleur de fond : rgba(255, 0, 0, 0.5);)

Le dernier chiffre fixe la transparence à 50 %. Vous pouvez définir la valeur de transparence de 0 (fond complètement transparent) à 1 (complètement opaque).

image d'arrière-plan

Cette propriété est également très souvent utilisée, elle permet d'attribuer une image au fond. CSS3 a ajouté la possibilité d'attribuer plusieurs images à l'arrière-plan, chacune créant son propre calque, de sorte que chaque image suivante chevauche la précédente. Pourquoi cela pourrait-il être utile ? Tout est assez simple : disons que vous devez visser des petites fioritures dans chaque coin du site. Étant donné une mise en page plus ou moins caoutchouteuse, utiliser une seule image n’est pas une option. Par conséquent, nous créons 4 "calques", déplaçons chaque image dans son propre coin et c'est tout, le problème est résolu

Corps (image d'arrière-plan : url("image1"), url("image2"), url("image3"))

Si vous devez attribuer une image à l'arrière-plan, nous ne laissons que la première dans le code, je pense que c'est compréhensible.
Lorsque vous utilisez des images comme arrière-plan, vous devez vous rappeler deux règles :

• définissez une couleur d'arrière-plan contrastée au cas où l'utilisateur ne verrait pas l'image pour une raison quelconque. Il peut simplement désactiver l'affichage des images, économisant ainsi du trafic.
• N'utilisez pas d'image d'arrière-plan pour transmettre des informations importantes. Pour les raisons évoquées ci-dessus, l'utilisateur peut ne pas le voir.

La prise en charge de plusieurs images d'arrière-plan est assez étendue. Tous les navigateurs, même IE8, prennent en charge cette propriété.

De l'auteur : Bonjour à tous. Les couleurs et les images d’arrière-plan jouent un rôle important dans la conception Web, car elles vous permettent de concevoir n’importe quel élément de manière plus attrayante. Aujourd'hui, nous allons voir comment créer un arrière-plan en HTML.

Est-il possible d'utiliser HTML pour définir l'arrière-plan ?

Je dirai tout de suite que non. En général, le HTML n’a pas été créé pour concevoir des pages Web. C'est juste très gênant. Par exemple, il existe un attribut bgcolor avec lequel vous pouvez définir la couleur d'arrière-plan, mais cela est très gênant.

En conséquence, nous utiliserons des feuilles de style en cascade (CSS). Il existe beaucoup plus de possibilités de création d'un arrière-plan. Aujourd'hui, nous allons examiner les plus élémentaires.

Comment définir l’arrière-plan en utilisant CSS ?

Donc, tout d’abord, vous devez décider sur quel élément vous souhaitez définir l’arrière-plan. Autrement dit, nous devons trouver un sélecteur dans lequel nous écrirons une règle. Par exemple, si vous devez définir l'arrière-plan de la page entière dans son ensemble, vous pouvez le faire via le sélecteur de corps et pour tous les blocs via le sélecteur div. Eh bien, etc. L'arrière-plan peut et doit être lié à tout autre sélecteur : classes de style, identifiants, etc.

Après avoir choisi le sélecteur, vous devez écrire le nom de la propriété elle-même. Pour définir la couleur d'arrière-plan (c'est-à-dire une couleur unie, pas un dégradé ou une image), utilisez la propriété background-color. Après cela, vous devez mettre deux points et écrire la couleur elle-même. Cela peut être fait de différentes manières. Par exemple, en utilisant des mots-clés, du code hexadécimal, des formats RVB, RVBA, HSL. N’importe quelle méthode fera l’affaire.

La méthode la plus couramment utilisée est le code hexadécimal. Pour sélectionner les couleurs, vous pouvez utiliser un programme qui affiche le code couleur. Par exemple, Photoshop, Paint ou un outil en ligne. En conséquence, à titre d'exemple, j'écrirai un contexte général pour l'ensemble de la page Web.

corps (couleur d'arrière-plan : #D4E6B3 ; )

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

Image en arrière-plan

Pour l'image j'utiliserai une petite icône en langage html :

Créons un bloc vide avec un identifiant :

Donnons-lui des dimensions et un contexte explicites :

#bg( largeur : 400px ; hauteur : 250px ; image d'arrière-plan : url(html.png); )

À partir de ce code, vous pouvez voir que j'ai utilisé une nouvelle propriété - background-image. Il est spécifiquement destiné à insérer une image comme arrière-plan d'un élément HTML. Voyons ce qui s'est passé :

Pour spécifier une image, vous devez écrire le mot-clé url après les deux points, puis indiquer le chemin d'accès au fichier entre parenthèses. Dans ce cas, le chemin est spécifié en fonction du fait que l'image se trouve dans le même dossier que le document HTML. Vous devez également spécifier le format de l'image.

Si vous avez fait cela et que l'arrière-plan n'est toujours pas affiché dans le bloc, vérifiez à nouveau si vous avez écrit correctement le nom de l'image, si le chemin et l'extension sont correctement définis. Ce sont les raisons les plus courantes pour lesquelles l'arrière-plan n'apparaît tout simplement pas parce que le navigateur ne trouve pas l'image.

Mais avez-vous remarqué une chose ? Le navigateur a pris et multiplié l'image dans tout le bloc. Donc, juste pour que vous le sachiez, c'est le comportement par défaut des images d'arrière-plan : elles sont répétées verticalement et horizontalement tant qu'elles peuvent tenir dans le bloc. Par ce comportement, vous pouvez facilement contrôler. Pour ce faire, utilisez la propriété background-repeat, qui possède 4 valeurs principales :

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

Répéter-x – se répète uniquement sur l'axe x ;

Répéter-y – se répète uniquement le long de l'axe y ;

No-repeat – ne se répète pas du tout ;

Vous pouvez écrire chaque valeur et voir ce qui se passe. Je vais l'écrire comme ceci :

répétition d'arrière-plan : répétition-x ;

Maintenant, répétez uniquement horizontalement. Si vous ne définissez pas de répétition, il n'y aura qu'une seule image.

Super, nous pouvons terminer ici, car ce sont les capacités de base du travail avec l'arrière-plan, mais je vais vous montrer 2 autres propriétés qui vous permettent d'avoir plus de contrôle.

Grâce à la répétition, les concepteurs de mise en page étaient capables de créer des textures d'arrière-plan et des dégradés à l'aide d'une petite image. Il peut mesurer 30 x 10 pixels ou même moins. Ou peut-être un peu plus. L'image était telle que lorsqu'elle était répétée sur une ou même sur les deux faces, aucune transition n'était visible, le résultat était donc un arrière-plan unique et homogène. Soit dit en passant, cette approche vaut la peine d'être utilisée maintenant si vous souhaitez utiliser une texture transparente sur votre site Web comme arrière-plan. Aujourd'hui, le dégradé peut déjà être implémenté à l'aide des méthodes CSS3, nous en reparlerons certainement plus tard.

Position d'arrière-plan

Par défaut, l'image d'arrière-plan, à moins qu'elle ne soit configurée pour se répéter, sera dans le coin supérieur gauche de son bloc. Mais la position peut être facilement modifiée à l'aide de la propriété background-position.

Vous pouvez le définir de différentes manières. Une option consiste simplement à indiquer les côtés sur lesquels l’image doit être située :

position d'arrière-plan : en haut à droite ;

Autrement dit, verticalement, tout reste le même : l'image d'arrière-plan est située en haut, mais horizontalement, nous avons changé le côté vers la droite, c'est-à-dire vers la droite. Une autre façon de définir une position est en pourcentage. Dans ce cas, le compte à rebours commence dans tous les cas à partir du coin supérieur gauche. 100% - tout le bloc. Ainsi, pour placer l'image exactement au centre, on l'écrit ainsi :

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

N'oubliez pas une chose importante concernant le positionnement : le premier paramètre est toujours la position horizontale et le second est la position verticale. Ainsi, si vous voyez une valeur de 80 % à 20 %, vous pouvez immédiatement conclure que l’image d’arrière-plan sera beaucoup décalée vers la droite, mais ne descendra pas beaucoup.

Et enfin, vous pouvez spécifier la position en pixels. Tout est pareil, seulement au lieu de % il y aura px. Dans certains cas, un tel positionnement peut être nécessaire.

Notation abrégée

Convenez que le code s'avère assez fastidieux si tout est défini comme nous l'avons fait. Il s'avère que le chemin vers l'image doit être spécifié, la répétition et la position. Bien entendu, la répétition et la position ne sont pas toujours nécessaires, mais dans tous les cas, il serait plus correct d'utiliser une notation abrégée pour la propriété. Cela ressemble à ceci :

arrière-plan : #333 url(bg.jpg) sans répétition 50 % 50 % ;

Autrement dit, la première étape consiste à enregistrer la couleur d’arrière-plan unie globale, si nécessaire. Puis le chemin vers l'image, la répétition et la position. Si un paramètre n’est pas nécessaire, omettez-le simplement. D'accord, c'est beaucoup plus rapide et plus pratique, et nous réduisons également considérablement notre code. De manière générale, je vous conseille de toujours écrire sous forme abrégée, même s'il vous suffit d'indiquer une couleur ou une image.

Contrôler la taille de l'image d'arrière-plan

Notre image actuelle n'est pas très bonne pour démontrer le prochain tour, je vais donc en prendre une autre. Que ce soit la taille d'un bloc ou plus. Alors, imaginez que vous soyez confronté à la tâche de créer une image d'arrière-plan afin qu'elle ne remplisse pas complètement son bloc. Et l’image, par exemple, est encore plus grande que la taille du bloc.

Que pouvez-vous faire dans ce cas ? Bien sûr, l'option la plus simple et la plus raisonnable serait simplement de réduire l'image, mais ce n'est pas toujours possible de le faire. Disons qu'il est sur le serveur et que pour le moment, il n'y a ni le temps ni la possibilité de le réduire. Le problème peut être résolu en utilisant la propriété background-size, que l'on peut qualifier de relativement nouvelle et qui vous permet de manipuler la taille de l'image d'arrière-plan, et même de n'importe quel arrière-plan.

Mon image occupe donc désormais toute la place du bloc, mais je vais lui donner une taille de fond :

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

Encore une fois, le premier paramètre définit la taille horizontale, le second la taille verticale. Nous voyons que tout a été appliqué correctement - la photo représente 80% de la largeur du bloc en largeur et la moitié en hauteur. Ici, il vous suffit d'apporter une précision : en définissant la taille en pourcentage, vous pouvez influencer les proportions de l'image. Soyez donc prudent si vous ne voulez pas bouleverser les proportions.

Comme vous pouvez le deviner, la taille de l’arrière-plan peut également être spécifiée en pixels. Il existe deux autres mots-clés qui peuvent également être utilisés :

Couverture – l’image sera mise à l’échelle de manière à ce qu’au moins d’un côté elle remplisse complètement le bloc.

Contenir – le redimensionne pour que l'image s'intègre complètement dans le bloc à sa taille maximale.

L'avantage de ces valeurs est qu'elles ne modifient pas les proportions de l'image, les laissant identiques.

Vous devez également comprendre qu'étirer l'image peut entraîner une détérioration de sa qualité. Je peux donner un exemple tiré de la vie et de la pratique réelle des maquettistes. Tout le monde sait et comprend que lors de la conception pour les ordinateurs de bureau, vous devez adapter le site aux principales largeurs d'écran : 1280, 1366, 1920. Si vous prenez une image d'arrière-plan, disons, de 1280 x 200, et ne lui donnez pas d'arrière-plan. taille, puis les écrans avec une largeur plus grande. Un espace vide apparaîtra, l'image ne remplira pas complètement la largeur.

Dans 99% des cas, cela ne convient pas au développeur web, il définit donc background-size: cover pour que l'image s'étende toujours jusqu'à la largeur maximale de la fenêtre. C'est une bonne technique à utiliser, mais vous serez désormais confronté au problème selon lequel les utilisateurs avec une largeur d'écran de 1920 pixels peuvent voir une qualité d'image sous-optimale.

Je vous le rappelle, il s'étirera jusqu'à sa largeur maximale. En conséquence, la qualité se détériorera automatiquement. La seule bonne solution ici serait d’utiliser initialement une image plus grande – 1920 pixels de large. Ensuite, sur les écrans les plus larges, elle sera en taille naturelle, et sur d'autres, elle sera simplement coupée progressivement, mais en même temps, si l'image de fond est correctement sélectionnée, cela n'affectera pas l'apparence du site.

En général, ce n'est qu'un exemple de la façon d'utiliser les connaissances que vous avez acquises dans cet article lors de la création de mises en page réelles.

Fond translucide utilisant CSS

Une autre fonctionnalité qui peut être implémentée à l'aide de CSS est un arrière-plan translucide. C’est-à-dire qu’à travers ce contexte, il sera possible de voir ce qu’il y a derrière.

À titre d'exemple, je définirai la page entière comme arrière-plan de l'image que nous avons utilisée plus tôt dans les exemples. Pour le bloc d'identifiant bg, sur lequel nous menons toutes nos expérimentations, nous définirons le fond en utilisant le format de réglage des couleurs rgba.

Comme je l'ai dit plus tôt, il existe de nombreux formats pour définir les couleurs en CSS. L'un d'eux est le RVB, un format assez connu de ceux qui travaillent dans les éditeurs graphiques. C'est écrit ainsi : rgb(17, 255, 34);

La première valeur entre parenthèses est la saturation du rouge, puis du vert, puis du bleu. La valeur peut être numérique de 0 à 255. En conséquence, le format rgba n'est pas différent, un seul paramètre supplémentaire est ajouté - le canal alpha. La valeur peut être comprise entre 0 et 1, où 0 correspond à une transparence totale.