bg-image ~ en fond de site ou d'un bloc de contenu

Cette action ajoute une image comme décoration de fond du site ou d'un bloc.

➠ bg_image : Affiche une image en fond d'un bloc

Cliquer pour lire la documentation

syntaxe {up bg-image=chemin_image} contenu {/up bg-image}
doc : https://developer.mozilla.org/fr/docs/Web/CSS/background
author LOMART version 1.0 license GNU/GPLv3 credit Vegas de jaysalvat
  • bg_image: images séparées par des points-virgules
  • mobile: image ou règle(s) css (si smartphone)
  • path: chemin de base ajouté devant le nom des fichiers
  • bg-selector=body: sélecteur du bloc pour image(s) de fond
  • bg-color: couleur sous image
  • bg-repeat=no-repeat: répétition de l'image : no-repeat, repeat-x, repeat-y, repeat, space
  • bg-position=center: position de l'image : left
  • bg-size=cover: remplissage : cover, contain, 100%, 100px
  • bg-attachment=scroll: défilement de l'image : scroll, fixed, local
  • bg-overlay: image ajouté en overlay
  • page-selector: si block défini, sélecteur du bloc sur lequel appliquer la transparence
  • page-overlay=70: transparence sous la forme 70, #RGBA, image overlay ou règle CSS
  • center: centrage vertical du contenu entre shortcodes
  • style: style inline pour bloc
  • base-css: règles CSS définies par le webmaster (ajout dans le head)
    Pour présenter cette action, j'ai opté pour une ambiance "marine".
    Si vous êtes impatient de savoir comment la déco de cette page a été faite, rendez-vous à la section Modifier la décoration du site pour une page

    La méthode simple

    Une seule image comme argument principal qui sera affichée comme :

    • habillage pour le fond du bloc pour le contenu entre les shortcodes
      {up bg-image=photo.jpg}contenu{/up bg-image}
    • fond du site
      {up bg-image=photo.jpg}
    • fond du bloc indiqué par l'option bg-selector
      {up bg-image=photo.jpg | bg-selector=#header}

    L'image s'adapte

    En fonction de la taille de l'image, celle-ci sera ajustée ou sera répétée pour recouvrir toute la surface du bloc

    Un exemple simple pour habiller un bloc

    trois-mâts

    Une grande image recouvrira la totalité du bloc

    {up bg-image=images/actions-demo/bg/sunset.jpg}
    	<h2 class="p3 tc t-blanc">Un exemple simple pour habiller un bloc</h2>
    {/up bg-image}
    

    Habiller un bloc avec une petite image

    motif

    Une petite image sera répétée sur la totalité du bloc

    {up bg-image=images/actions-demo/bg/03.png}
      <p class="p3 tc b fs200">
        <mark class="bg-gris t-blanc ph2" style="box-shadow:inset 0px 0px 2px 1px rgba(0,0,0, 0.5);">
          Habiller un bloc avec une petite image
        </mark>
      </p>
    {/up bg-image}
    

    Personnalisation avec les options

    Un moyen simple pour agrémenter du texte

    {up bg-image=images/actions-demo/bg/sunset.jpg
     | bg-color=#B78A01
     | bg-size=contain
     | bg-position=0% 
    }
      <h2 class="p3 tc t-blanc">Un moyen simple pour agrémenter du texte </h2>
    {/up bg-image}

    Le nom des options est identique aux propriétés CSS. On a juste remplacé background par bg. Les valeurs admises sont les mêmes que pour les propriétés CSS correspondantes.

    Dans l'exemple ci-dessus, nous avons demandé que l'image soit entièrement visible (bg-size=contain) et alignée sur la gauche (bg-position=0%). Une couleur uniforme est définie pour la zone non recouverte par l'image (bg-color=#B78A01).

    La méthode CSS

    { up bg-image | bg-css=url(images/actions-demo/bg/sunset.jpg) #B78A01 0%/contain no-repeat }

    Un moyen simple pour agrémenter du texte

    Il est possible d'obtenir le même résultat en écrivant l'attribut pour la propriété CSS background.

    {up bg-image | bg-css=url(images/actions-demo/bg/sunset.jpg) #B78A01 0%/contain no-repeat }
      <h2 class="p3 tc t-blanc">Un moyen simple pour agrémenter du texte </h2>
    {/up bg-image}	
    

    Lisibilité du contenu

    Mettre une image en fond est agréable, mais nuit à la lisibilité du texte.

    Overlay

    L'option bg-overlay ajoute un masque sur la totalité de l'image.

    Ajout d'un masque blanc transparent

    {up bg-image=images/actions-demo/bg/sunset.jpg | bg-overlay=20 }
    

    bg-overlay=20

    bg-overlay=50

    bg-overlay=90

    Ajout d'une image

    Vous pouvez utiliser les images proposées par UP dans le dossier assets/overlay. Il suffit d'indiquer le nom de l'image. Une image overlay est obligatoirement de type PNG.

    {up bg-image=images/actions-demo/bg/sunset.jpg | bg-overlay=02.png }
    

    bg-overlay=02.png

    bg-overlay=01-rouge.png

    bg-overlay=09.png

    Il est aussi possible d'indiquer le chemin complet vers votre image

    bg-overlay=images/actions-demo/bg/foggy-birds.png

    Vous pouvez trouver des images pour vos overlays sur le site : www.transparenttextures.com/

    Ajout d'une valeur CSS

    Il est aussi possible d'indiquer une valeur compatible avec la propriété background

    J'ai mis les codes au-dessous des exemples. Le plus simple est d'utiliser un générateur comme celui proposé par colorzilla.com. Ne pas oublier de choisir un format de couleur rgba pour conserver une transparence.

    bg-overlay=w05.png

    {up bg-image=images/actions-demo/bg/sunset.jpg 
     | bg-overlay=radial-gradient(
       ellipse at center, 
       rgba(255,0,0,0.5) 0%, 
       rgba(0,0,0,0.5) 100%) 
    }

    bg-overlay=g05.png

    {up bg-image=images/actions-demo/bg/sunset.jpg
     | bg-overlay=linear-gradient(
       0deg, 
       rgba(255,255,255,0.6) 0%, 
       rgba(0,128,128,0.7) 100%) 
    }

    bg-overlay=b05.png

    {up bg-image=images/actions-demo/bg/sunset.jpg 
    | bg-overlay=linear-gradient(
       90deg, 
       rgba(255,0,0,0.7) 0%, 
       rgba(255,255,0,0.7) 25%, 
       rgba(5,193,255,0.7) 50%, 
       rgba(255,255,0,0.7) 75%, 
       rgba(255,0,0,0.7) 100%) 
    }

    Le multi-images

    multi-images et smartphones

    Pour s'adapter aux différentes tailles d'écran, il est pratique de définir un fond composé de plusieurs images.

    Si vous redimensionnez la fenêtre de votre navigateur ou consultez cette page sur un smartphone, vous pourrez constater que toutes les images restent visibles ainsi que le texte.

    Explications

    {up bg-image= images/actions-demo/bg/gauche.png; 
    	      images/actions-demo/bg/droite.png; 
    	      images/actions-demo/bg/trois-mats.jpg;
      | bg-position = left; right; center
      | bg-size = contain; contain; cover
      | bg-attachment = scroll; scroll; scroll
      | bg-color = #bbb
      | style = min-height:300px
      | center = w75 bg-80 p2 tc
    }
    <p class="fs200 b">multi-images et smartphones</p>
    <p>Pour s'adapter aux différentes tailles d'écran, il est pratique de définir un fond composé de plusieurs images.</p>
    {/up bg-image}
    
    • bg-image : les 3 images utilisées pour construire le fond. Celle du dessus en premier et celle tout en-dessous en dernier.
    • bg-position : la position pour les 3 images dans le même ordre que les images. left pour gauche.png, right pour droite.png et center pour trois-mats.jpg
    • bg-size : contain pour gauche et droite afin de toujours voir l'intégralité de l'image et cover pour que le trois-mats recouvre toute la surface
    • bg-attachment : scroll pour les 3, afin que les images se déplacent avec la page
    • bg-color : la couleur de fond visible durant le chargement des images
    • style : une hauteur minimale pour le bloc principal
    • center : permet de centrer verticalement le contenu. Les classes indiquées limitent la largeur, ajoutent un fond transparent et un padding, centrent horizontalement le contenu

    Modifier la décoration du site pour une page

    Jusqu'à présent, nous avons ajouté un fond à du contenu que nous fournissions. Il peut être judicieux de modifier l'ambiance générale du site pour illustrer le contenu d'un article. Une belle plage ensoleillée pour un voyage aux tropiques ...

    Sur notre page de démo, j'ai modifié 2 éléments : le fond du site et celui de la barre de menu

    Le fond de site

    {up bg-image=images/actions-demo/bg/gauche.png; 
                 images/actions-demo/bg/droite.png; 
                 linear-gradient(to bottom, transparent 40%,rgba(42,176,237,0.4) 100%); 
                 images/actions-demo/bg/trois-mats.jpg;
      | bg-position = left; right; none; 80% 50%
      | bg-size = contain; contain; none; cover
      | bg-attachment=fixed; fixed; fixed; fixed
      | bg-color = #bbb
      | bg-overlay=40
      | path=images/actions-demo/
      | page-selector=#sp-main-body > .container
      | page-overlay=80
    }
    

    Le shortcode est quasiment identique à l'exemple précédent. Voyons les différences :

    • bg-image: un masque dégradé bleuté dans la partie basse sur la photo du trois-mâts
    • bg-position : pour toujours voir la proue du trois-mâts sur les smartphones, j'ai déplacé le centre du recadrage à 80% vers la droite
    • bg-attachement sur fixed pour que le fond reste immobile lors d'un scroll sur la page. Ici, j'ai
    • bg-overlay ajoute un masque blanc à 40% sur la totalité des images
    • page-selector et page-overlay permettent d'avoir un fond semi-transparent sous le contenu de la page. Le sélecteur doit être identifié à l'aide d'un inspecteur de code.
    • et bien sûr : aucun contenu pour ne pas créer de bloc

    Un bloc identifié par son sélecteur css

    Pour accentuer cette ambiance marine, quoi de mieux que d'ajouter des vagues à la barre des menus

    {up bg-image=images/actions-demo/bg/mer3.jpg 
     | bg-selector=#sp-header 
     | base-css=
         .logo [padding-left: 10px;padding-right: 10px;background: #fff;]
         #sp-header a[color:#fff;font-weight:bold]
         #sp-header .fa.fa-bars[color: #fff]
    }
    • bg-image : l'image utilisée.
    • bg-selector très important, c'est le sélecteur CSS du bloc
    • base-css permet d'ajouter des règles CSS pour conserver la lisibilité du logo et des menus
    • et toujours pas de contenu

    Pour cette démonstration, pour ne pas perturber le sommaire, j'ai dû utiliser des balises p pour des titres. Il est évident que cela n'est pas un exemple à suivre.