Fonds et Arrière-plans

Contrôlez la couleur des fond / arrière-plans de vidéo, d’image et plus encore en allant sur Advanced > Background.

Réglages disponibles

Background Color – Couleur de fond

Définit la couleur d’arrière-plan de l’élément.

Background Image – Image de fond

Définit une image pour le fond. Si l’image ne parvient pas à se charger, la couleur de fond sera utilisée.

Vous pouvez définir l’image de trois manières :

1. Spécifiez l’URL de l’image
2. Téléversez ou utilisez une image existante dans la bibliothèque de media WordPress en cliquant sur Browse.
3. Définissez l’image d’arrière-plan sur Dynamic Data, telle que l’image sélectionnée de la publication, en cliquant sur Data.

Image Overlay Color – Couleur de superposition d’image

Si l’image d’arrière-plan est définie, vous pouvez l’assombrir, l’éclaircir et la teinter.

Utilisez cette option pour vous assurer que le texte placé sur les images d’arrière-plan présente un contraste suffisant afin d'en améliorer la lisibilité.

Utilisez le curseur d’opacité au bas du sélecteur de couleur pour régler la transparence de la couleur de surimpression, en veillant à ce que l’image d’arrière-plan reste suffisamment visible.

Background Size – Taille d'arrière-plan

• auto – Utilise la hauteur et la largeur d’origine de l’image.
• cover – Adapte l’échelle de l’image de façon à remplir complètement l’arrière-plan de l’élément.
• contain – Adapte l’échelle de l’image afin que sa dimension la plus grande soit contenue à l’intérieur de l’élément.
• manual – Définissez manuellement la largeur et la hauteur de l’image.

Background Repeat – Répétition de l’image d’arrière-plan

• repeat – L’image d’arrière-plan est répétée à la fois verticalement et horizontalement jusqu'à remplir l’élément.
• repeat-x – L’image d’arrière-plan est répétée horizontalement jusqu'à remplir la largeur de l’élément.
• repeat-y –  L’image d’arrière-plan est répétée verticalement jusqu'à remplir la hauteur de l’élément.
• no-repeat – L’image d’arrière-plan n’est pas répétée. L’image n’est montrée qu’une fois. C’est la valeur par défaut.

Background Attachment (Parallax) – Arrière-plan lié (effet parallax)

• scroll – La position de l’image d’arrière-plan sera fixée à l’élément et défilera avec l’élément et la page.
• fixed - La position de l’image de fond sera fixée à la page et ne défilera pas vers le haut ou le bas avec l’élément.

Utilisez fixed pour un effet de défilement en parallaxe.

Background Position (Left and Top) – Positionnement du fond

La saisie des valeurs Top et Left permet de positionner l’image par rapport au coin supérieur gauche de l’élément.

Background Clip

• border-box – L’arrière-plan s’étend jusqu’au bord extérieur de la bordure de l’élément.
  La bordure recouvre donc la couleur d’arrière-plan
• padding-box – L’arrière-plan s’étend jusqu’au bord intérieur de la bordure de l’élément.
• content-box – L’arrière-plan s’étend jusqu’à atteindre la marge intérieure.

Background Blend Mode – Mode de fusion de l’arrière-plan

Les modes de fusion d’arrière-plan vous permettent de définir la manière dont l’image d’arrière-plan d’un élément doit se fondre avec la couleur ou le dégradé d’arrière-plan de ce même élément.

• Normal – Aucun mélange n’est appliqué.
• Multiply – La couleur et l’image d’arrière-plan sont multipliées, ce qui donne généralement une image colorée plus sombre que l’original.
• Screen – L’image et la couleur d’arrière-plan sont inversées, multipliées puis inversées à nouveau.
• Overlay – La couleur d’arrière-plan est mélangée à l’image.
• Darken – La couleur d’arrière-plan remplace les zones de l’image qui sont plus claires qu'elle.
• Lighten – La couleur d’arrière-plan remplace les zones de l’image qui sont plus foncées qu'elle.
• Color-dodge – La couleur de fond est divisée par l’inverse de l’image de fond.
• Color-burn – La couleur d’arrière-plan est inversée, divisée par l’image d’arrière-plan, puis à nouveau inversée.
• Hard-light – Les zones de l'image plus claires que la couleur d’arrière-plan sont traitées comme avec le mode de fusion Multiply et les zones de l’image plus sombres que la couleur de l’arrière-plan sont traitées comme avec le mode de fusion Screen.
• Soft-light – Semblable à Hard-light mais d’apparence plus diffuse.
• Difference – Les couleurs les plus sombres de l’image d’arrière-plan et la couleur d’arrière-plan sont soustraites des plus claires. Cela donne une image avec un contraste élevé
• Exclusion – Similaire à Difference, mais avec un contraste plus faible.
• Hue – La teinte de l’image d’arrière-plan est combinée à la luminosité et à la saturation de la couleur d’arrière-plan.
• Saturation – La saturation de l’image d’arrière-plan est conservée lors du mélange de la luminosité et de la teinte de la couleur d’arrière-plan.
• Color – Mélange la teinte et la saturation de l’image d’arrière-plan avec la luminosité de la couleur d’arrière-plan.
• Luminosity – La luminosité de l’image d’arrière-plan est préservée en utilisant la teinte et la saturation de la couleur d’arrière-plan.

Définir un arrière plan avec une vidéo

Oxygen permet de définir une vidéo comme arrière-plan pour les éléments de type Section uniquement. Pour définir les arrière-plans vidéo d’autres éléments, utilisez le plug-in Video Background.

Video Background URL – URL de la vidéo d’arrière-plan

La vidéo doit être au format .mp4 ou .webm.

Vous pouvez définir la vidéo de deux manières :

1. Spécifiez l’URL de la vidéo
2. Téléchargez ou utilisez une vidéo existante dans la médiathèque WordPress en cliquant sur Browse.

Conseil : stockez l’arrière-plan de votre vidéo sur un service tel que Cloudinary pour un chargement rapide.

Hide Video Below (Masquer la vidéo en-dessous de)

Pour masquer un arrière-plan vidéo sous une certaine largeur d’écran, sélectionnez la largeur d’écran dans la liste.

Les arrière-plans vidéo fonctionnent mieux sur les grands écrans, généralement utilisés sur les ordinateurs de bureau et les ordinateurs portables dotés d’une connexion Internet rapide. Les utilisateurs de mobiles ont souvent des connexions plus lentes et l’utilisation d’un arrière-plan vidéo n’est donc pas recommandée.

Video Overlay (Superposition pour vidéo)

Lorsqu’une vidéo d’arrière-plan est définie, vous pouvez l’assombrir, l’éclaircir et la coloriser.

Utilisez cette option pour vous assurer que le texte placé sur la vidéo d’arrière-plan présente un contraste suffisant pour être facilement lisible.

Utilisez le curseur d’opacité au bas du sélecteur de couleur pour régler la transparence de la couleur de superposition, en veillant à ce que la vidéo d’arrière-plan soit visible.

GRADIENT BACKGROUNDS – Fonds de dégradé(s) de couleur(s)

Greg C. / Ph. Reskator