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.

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}

  Le sélecteur est à adapter selon le template de votre site

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

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}

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

{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 }

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 }

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 }

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

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.

{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%) 
}

{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%) 
}

{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

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 
 | css-head=
     .logo [padding-left: 10px;padding-right: 10px;background: #fff;]
     #sp-header a[color:#fff;font-weight:bold]
     #sp-header .fa.fa-bars[color: #fff]
}

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.