CSS
Arrière-plans

Introduction

Syntaxe

• couleur de fond: couleur | transparent | initiale | hériter;
• background-image: url | aucun initiale | hériter;
• background-position: valeur;
• taille d'arrière-plan: <bg-size> [<bg-size>]
• <bg-size>: auto | longueur | couverture | contenir | initiale | hériter;
• répétition d'arrière-plan: répéter | repeat-x | répétition-y | pas de répétition | initiale | hériter;
• background-origine: padding-box | border-box | box de contenu | initiale | hériter;
• background-clip: border-box | boîte de rembourrage | box de contenu | initiale | hériter;
• pièce jointe: défilement | fixe | local | initiale | hériter;
• arrière-plan: bg-image position bg-image / taille bg répétition bg origine bg-clip fixation bg initiale | hériter;

Remarques

Couleur de fond

La propriété background-color définit la couleur d'arrière-plan d'un élément à l'aide d'une valeur de couleur ou de mots-clés, tels que transparent , inherit ou initial .

• transparent , spécifie que la couleur d'arrière-plan doit être transparente. Ceci est la valeur par défaut.

• inherit , hérite de cette propriété de son élément parent.

• initial , définit cette propriété sur sa valeur par défaut.

Cela peut être appliqué à tous les éléments, et aux pseudo-éléments ::first-letter / ::first-line .

Les couleurs en CSS peuvent être spécifiées par différentes méthodes .

Les noms de couleur

CSS

div {
  background-color: red;  /* red */
} 

HTML

<div>This will have a red background</div>

• L'exemple ci-dessus est l'une des nombreuses façons dont CSS doit représenter une seule couleur.

Codes de couleur hexadécimaux

Le code hexadécimal est utilisé pour désigner les composants RVB d'une couleur en notation hexadécimale de base 16. # ff0000, par exemple, est rouge vif, le composant rouge de la couleur est 256 bits (ff) et les parties verte et bleue correspondantes de la couleur sont 0 (00).

Si les deux valeurs de chacun des trois couplages RVB (R, G et B) sont identiques, le code de couleur peut être raccourci en trois caractères (le premier chiffre de chaque association). #ff0000 peut être raccourci en #f00 , et #ffffff peut être raccourci en #fff .

La notation hexadécimale est insensible à la casse.

body {
  background-color: #de1205; /* red */
}

.main {
  background-color: #00f; /* blue */
}

RGB / RGBa

Une autre façon de déclarer une couleur est d'utiliser RGB ou RGBa.

RVB signifie Rouge, Vert et Bleu, et nécessite trois valeurs distinctes entre 0 et 255, mises entre parenthèses, qui correspondent aux valeurs de couleur décimales pour respectivement rouge, vert et bleu.

RGBa vous permet d'ajouter un paramètre alpha supplémentaire entre 0.0 et 1.0 pour définir l'opacité.

header {
  background-color: rgb(0, 0, 0); /* black */
}

footer {
  background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
}

HSL / HSLa

Une autre façon de déclarer une couleur est d'utiliser HSL ou HSLa et est similaire à RGB et RGBa.

HSL est synonyme de teinte, de saturation et de légèreté et est souvent appelé HLS:

• La teinte est un degré sur la roue chromatique (de 0 à 360).
• La saturation est un pourcentage compris entre 0% et 100%.
• La légèreté est également un pourcentage compris entre 0% et 100%.

HSLa vous permet d'ajouter un paramètre alpha supplémentaire entre 0.0 et 1.0 pour définir l'opacité.

li a {
  background-color: hsl(120, 100%, 50%); /* green */
}

#p1 {
  background-color: hsla(120, 100%, 50%, .3); /* green with 30% opacity */
}

Interaction avec image de fond

Les instructions suivantes sont toutes équivalentes:

body {
  background: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-color: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-image: url(partiallytransparentimage.png);
  background-color: red;
}

body {
  background: red url(partiallytransparentimage.png);
}

Ils mèneront tous à la couleur rouge affichée sous l'image, où les parties de l'image sont transparentes, ou l'image ne s'affiche pas (peut-être à la suite d' background-repeat ).

Notez que ce qui suit n'est pas équivalent:

body {
  background-image: url(partiallytransparentimage.png);
  background: red;
}

Ici, la valeur d' background - background remplace votre background-image .

Pour plus d'informations sur la propriété d' background - background , voir Abrégé d'arrière - plan

Image de fond

La propriété background-image est utilisée pour spécifier une image d'arrière-plan à appliquer à tous les éléments correspondants. Par défaut, cette image est en mosaïque pour couvrir l'élément entier, à l'exclusion de la marge.

.myClass {
  background-image: url('/path/to/image.jpg');
}

Pour utiliser plusieurs images en tant qu'image d' background-image , définissez url()

.myClass {
  background-image: url('/path/to/image.jpg'),
                    url('/path/to/image2.jpg');
}

Les images s'empileront selon leur ordre avec la première image déclarée sur les autres et ainsi de suite.

Plus CSS pour Image d'arrière-plan

Ces attributs suivants sont très utiles et presque essentiels.

background-size:     xpx ypx | x% y%;
background-repeat:   no-repeat | repeat | repeat-x | repeat-y;
background-position: left offset (px/%) right offset (px/%) | center center | left top | right bottom;

Dégradés de fond

Les dégradés sont de nouveaux types d'image, ajoutés dans CSS3. En tant qu'image, les dégradés sont définis avec la propriété background-image ou le raccourci d' background - background .

Il existe deux types de fonctions de gradient, linéaires et radiales. Chaque type a une variante non répétitive et une variante répétitive:

• linear-gradient()
• repeating-linear-gradient()
• radial-gradient()
• repeating-radial-gradient()

gradient linéaire()

Un linear-gradient a la syntaxe suivante

background: linear-gradient( <direction>?, <color-stop-1>, <color-stop-2>, ...);

Par exemple, cela crée un dégradé linéaire qui part de la droite et passe du rouge au bleu

.linear-gradient {
  background: linear-gradient(to left, red, blue); /* you can also use 270deg */
}

Vous pouvez créer un dégradé en diagonal en déclarant une position de départ horizontale et verticale.

.diagonal-linear-gradient {
  background: linear-gradient(to left top, red, yellow 10%);
}

Il est possible de spécifier n'importe quel nombre d'arrêts de couleur dans un dégradé en les séparant par des virgules. Les exemples suivants créeront un dégradé avec 8 arrêts de couleur

.linear-gradient-rainbow {
  background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet)
}

gradient radial ()

.radial-gradient-simple {
  background: radial-gradient(red, blue);
}

.radial-gradient {
  background: radial-gradient(circle farthest-corner at top left, red, blue);
}

Gradients répétés

Les fonctions de dégradations répétées prennent les mêmes arguments que les exemples ci-dessus, mais placent le dégradé dans l'arrière-plan de l'élément.

.bullseye {
  background: repeating-radial-gradient(red, red 10%, white 10%, white 20%);
}
.warning {
  background: repeating-linear-gradient(-45deg, yellow, yellow 10%, black 10%, black 20% );
}

Notez que les codes de couleur HEX, RGB, RGBa, HSL et HSLa peuvent être utilisés à la place des noms de couleur. Les noms de couleurs ont été utilisés à des fins d'illustration. Notez également que la syntaxe à gradient radial est beaucoup plus complexe que le gradient linéaire, et une version simplifiée est présentée ici. Pour une explication complète et les spécifications, consultez la documentation MDN

Sténographie de fond

La propriété background peut être utilisée pour définir une ou plusieurs propriétés liées à l'arrière-plan:

L'ordre des valeurs n'a pas d'importance et chaque valeur est facultative

Syntaxe

La syntaxe de la déclaration abrégée d'arrière-plan est la suivante:

background: [<background-image>] [<background-color>]  [<background-position>]/[<background-size>] [<background-repeat>] [<background-origin>] [<background-clip>] [<background-attachment>] [<initial|inherit>];  

Exemples

background: red;

Il suffit de définir une background-color d' background-color avec la valeur red .

background: border-box red;

Définir un background-clip d' background-clip sur border-box et une background-color d' background-color sur rouge.

background: no-repeat center url("somepng.jpg");

Définit une background-repeat d' background-repeat sur non-répétition, background-origin d' background-origin au centre et background-image d' background-image sur une image.

background: url('pattern.png') green;

Dans cet exemple, la background-color d' background-color de l'élément serait définie sur green avec pattern.png , s'il est disponible, sur la couleur, en répétant autant de fois que nécessaire pour remplir l'élément. Si pattern.png inclut une transparence, la couleur green sera visible derrière.

background: #000000 url("picture.png") top left / 600px auto no-repeat;

Dans cet exemple, nous avons un fond noir avec une image "picture.png" en haut, l'image ne se répète pas dans les deux axes et est positionnée dans le coin supérieur gauche. Le / après la position est de pouvoir inclure la taille de l'image de fond qui, dans ce cas, est définie comme largeur 600px et auto pour la hauteur. Cet exemple pourrait bien fonctionner avec une image de fonction qui peut devenir une couleur unie.

REMARQUE: L' utilisation de la propriété d'arrière-plan abrégée réinitialise toutes les valeurs de propriété d'arrière-plan définies précédemment, même si aucune valeur n'est donnée. Si vous souhaitez uniquement modifier une valeur de propriété d'arrière-plan définie précédemment, utilisez plutôt une propriété longhand.

Position de fond

La propriété background-position est utilisée pour spécifier la position de départ d'une image d'arrière-plan ou d'un dégradé

.myClass {
  background-image: url('path/to/image.jpg');
  background-position: 50% 50%;
}

La position est définie à l'aide des coordonnées X et Y et définie à l'aide de l'une des unités utilisées dans CSS.

Les unités en CSS peuvent être spécifiées par différentes méthodes (voir ici ).

Propriétés de la position d'arrière-plan à long terme

En plus de la propriété abrégée ci-dessus, on peut également utiliser les propriétés d' background-position-x long background-position-x et background-position-y . Celles-ci vous permettent de contrôler les positions x ou y séparément.

REMARQUE: Ceci est pris en charge dans tous les navigateurs sauf Firefox (versions 31 à 48) 2 . Firefox 49, qui sera publié en septembre 2016, prendra en charge ces propriétés. Jusque-là, il existe un hack Firefox dans cette réponse Stack Overflow.

Attachement de fond

La propriété background-attachment définit si une image d'arrière-plan est fixe ou défile avec le reste de la page.

body { 
  background-image: url('img.jpg');
  background-attachment: fixed;
}

Exemples

pièce jointe: défilement

Le comportement par défaut, lorsque le corps défile, l’arrière-plan défile avec:

body {
  background-image: url('image.jpg');
  background-attachment: scroll;
}

background-attachment: corrigé

L'image de fond sera fixe et ne bougera pas lorsque le corps défilera:

body {
  background-image: url('image.jpg');
  background-attachment: fixed;
}

background-attachment: local

L'image de fond du div défilera lorsque le contenu de la div défilera.

div {
  background-image: url('image.jpg');
  background-attachment: local;
}

Répétition du fond

La propriété de répétition d'arrière-plan définit si / comment une image d'arrière-plan sera répétée.

Par défaut, une image d'arrière-plan est répétée verticalement et horizontalement.

div {
  background-image: url("img.jpg");
  background-repeat: repeat-y;
}

Voici à quoi ressemble une background-repeat: repeat-y :

Couleur de fond avec opacité

Si vous définissez l' opacity sur un élément, cela affectera tous ses éléments enfants. Pour définir une opacité juste sur l'arrière-plan d'un élément, vous devrez utiliser les couleurs RGBA. L'exemple suivant aura un arrière-plan noir avec une opacité de 0,6.

/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);

/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);

/* For IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);

/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

Image d'arrière-plan multiple

En CSS3, nous pouvons empiler plusieurs arrière-plans dans le même élément.

#mydiv {
  background-image: url(img_1.png), /* top image */
                    url(img_2.png), /* middle image */
                    url(img_3.png); /* bottom image */
  background-position: right bottom,
                       left top,
                       right top;
  background-repeat: no-repeat,
                     repeat,
                     no-repeat;
}

Les images seront empilées les unes sur les autres avec le premier arrière-plan en haut et le dernier arrière-plan en arrière. img_1 sera en haut, img_2 et img_3 en bas.

Nous pouvons également utiliser la propriété de raccourci d'arrière-plan pour ceci:

#mydiv {
  background: url(img_1.png) right bottom no-repeat,
              url(img_2.png) left top repeat,
              url(img_3.png) right top no-repeat;
}

Nous pouvons également empiler des images et des dégradés:

#mydiv {
  background: url(image.png) right bottom no-repeat,
              linear-gradient(to bottom, #fff 0%,#000 100%);
}

• Démo

La propriété background-origin

La propriété background-origin spécifie l'emplacement de l'image d'arrière-plan.

Remarque: Si la propriété background-attachment est définie sur fixed , cette propriété n'a aucun effet.

Valeur par défaut: padding-box

Valeurs possibles:

• padding-box - La position est relative à la boîte de rembourrage
• border-box - La position est relative à la case de bordure
• content-box - La position est relative à la zone de contenu
• initial
• inherit

CSS

.example {
  width: 300px;
  border: 20px solid black;
  padding: 50px;
  background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
  background-repeat: no-repeat;
}

.example1 {}

.example2 { background-origin: border-box; }

.example3 { background-origin: content-box; }

HTML

<p>No background-origin (padding-box is default):</p>

<div class="example example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div class="example example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div class="example example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

Résultat:

Plus:

https://www.w3.org/TR/css3-background/#the-background-origin

https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

Clip de fond

Définition et utilisation: La propriété background-clip spécifie la zone de peinture de l'arrière-plan.

Valeur par défaut: border-box

Valeurs

• border-box est la valeur par défaut. Cela permet à l'arrière-plan de s'étendre jusqu'au bord extérieur de la bordure de l'élément.
• padding-box coupe l'arrière-plan au bord extérieur du rembourrage de l'élément et ne le laisse pas s'étendre jusqu'à la bordure;
• content-box coupe l'arrière-plan au bord de la zone de contenu.
• inherit applique le paramètre du parent à l'élément sélectionné.

CSS

.example {
  width: 300px;
  border: 20px solid black;
  padding: 50px;
  background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
  background-repeat: no-repeat;
}

.example1 {}

.example2 { background-origin: border-box; }

.example3 { background-origin: content-box; }

HTML

<p>No background-origin (padding-box is default):</p>

<div class="example example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div class="example example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div class="example example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

Taille de fond

Aperçu général

La propriété background-size permet de contrôler la mise à l'échelle de l' background-image . Il prend jusqu'à deux valeurs, qui déterminent l'échelle / la taille de l'image résultante dans le sens vertical et horizontal. Si la propriété est manquante, son auto réputé en width et en height .

auto conservera le format de l'image, s'il peut être déterminé. La hauteur est facultative et peut être considérée comme auto . Par conséquent, sur une image de 256 px × 256 px, tous les paramètres de background-size suivants donneraient une image avec une hauteur et une largeur de 50 px:

background-size: 50px;
background-size: 50px auto; /* same as above */
background-size: auto 50px;
background-size: 50px 50px;

Donc, si nous avons commencé avec l'image suivante (qui a la taille mentionnée de 256 px × 256 px),

nous allons nous retrouver avec 50 px x 50 px sur l'écran de l'utilisateur, à l'arrière-plan de notre élément:

On peut également utiliser des valeurs de pourcentage pour redimensionner l'image en fonction de l'élément. L'exemple suivant donnerait une image dessinée de 200 px × 133 px:

#withbackground {
    background-image: url(to/some/background.png);

    background-size: 100% 66%;
    
    width: 200px;
    height: 200px;

    padding: 0;
    margin: 0;
}

Le comportement dépend de l' background-origin l' background-origin .

Garder le ratio d'aspect

Le dernier exemple de la section previos a perdu son format d'origine. Le cercle entra dans une ellipse, le carré dans un rectangle, le triangle dans un autre triangle.

L'approche de la longueur ou du pourcentage n'est pas assez flexible pour conserver le rapport d'aspect en tout temps. auto n'aide pas, car vous pourriez ne pas savoir quelle dimension de votre élément sera la plus grande. Cependant, pour couvrir complètement certaines zones avec une image (et corriger le format d'image) ou pour contenir une image avec un rapport d'aspect correct complètement dans une zone d'arrière-plan, les valeurs, le contain et la cover fournissent des fonctionnalités supplémentaires.

Eggsplanation pour contain et cover

Désolé pour le mauvais jeu de mots, mais nous allons utiliser une photo du jour de Biswarup Ganguly pour la démonstration. Disons qu'il s'agit de votre écran et que la zone grise est en dehors de votre écran visible. Pour démonstration, nous allons prendre un ratio de 16 × 9.

Nous voulons utiliser l'image ci-dessus de la journée comme arrière-plan. Cependant, nous avons recadré l'image en 4x3 pour une raison quelconque. Nous pourrions définir une propriété de background-size à une longueur fixe, mais nous nous concentrerons sur le contain et la cover . Notez que je suppose également que nous n'avons pas modifié la largeur et / ou la hauteur du body .

contain

contain

Mettez à l'échelle l'image, tout en conservant son rapport d'aspect intrinsèque (le cas échéant), à la plus grande taille, de sorte que sa largeur et sa hauteur puissent tenir dans la zone de positionnement de l'arrière-plan.

Cela garantit que l'image d'arrière-plan est toujours complètement contenue dans la zone de positionnement de l'arrière-plan. Cependant, il pourrait y avoir un espace vide rempli de votre background-color dans ce cas:

cover

cover

Mettez à l'échelle l'image, tout en conservant son rapport d'aspect intrinsèque (le cas échéant), à la plus petite taille, de sorte que sa largeur et sa hauteur puissent couvrir complètement la zone de positionnement de l'arrière-plan.

Cela garantit que l'image de fond couvre tout. Il n'y aura pas de background-color visible, mais en fonction du ratio de l'écran, une grande partie de votre image pourrait être coupée:

Démonstration avec le code actuel

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

Propriété background-blend-mode

.my-div {
    width: 300px;
    height: 200px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, black 0%,white 100%), url('https://static.pexels.com/photos/54624/strawberry-fruit-red-sweet-54624-medium.jpeg');
    background-blend-mode:saturation;
}

<div class="my-div">Lorem ipsum</div>

Voir le résultat ici: https://jsfiddle.net/MadalinaTn/y69d28Lb/

Syntaxe CSS: background-blend-mode: normal | multiplier | écran | superposition | assombrir | éclaircir | couleur-dodge | saturation | couleur | luminosité;