Comment ajouter une image d'arrière-plan

Example of a website using a dynamic background image
Exemple d'un site Web qui utilise une image d'arrière-plan

Le guide suivant explique en détail comment ajouter une image d'arrière-plan à toutes les pages d'un site (déconseillé) ou à une seule page de panneaux.

Voici quelques exemples de sites qui utilisent actuellement une image d'arrière-plan : Bureau international, Carte uOttawa, Guide étudiant au premier cycle et Aide financière et bourses.

Gouvernance

Pour utiliser une image d'arrière-plan, vous devez communiquer avec la Direction générale des communications afin qu'ils puissent la passer en revue et l'approuver.

Sur le plan conceptuel : (1) votre image ne doit pas détourner l'attention des lecteurs, donc évitez les images trop chargées, les images avec des couleurs foncées ou les images avec du texte; (2) la taille du fichier de l'image doit être aussi petite que possible afin de ne pas ralentir le chargement des pages du site, surtout sur des dispositifs mobiles.

Quant à l'usage, vous devez seulement utiliser une image d'arrière-plan pour rendre une page textuelle plus intéressante. Compte tenu de cela, vous devez éviter d'avoir d'autres images ou carrousels sur une page qui a une image d'arrière-plan. On conseille également que vous n'ajoutez une image d'arrière-plan qu'à une seule page ou un nombre restreint de pages, plutôt que de l'ajouter à toutes les pages du site dans les paramètres.

1. Activer le module et les permissions

  1. Tout d'abord, allez à Modules et activez les modules suivants : « Dynamic background » et « Dynamic background panels ». Ensuite, défilez jusqu'au bas de la page. À la gauche, cliquez sur le bouton Enregistrer la configuration.
  2. Allez à la page Personnes. Dans le coin supérieur droit de la page, cliquez sur l'onglet Droits. Sur la page qui apparaît, effectuez une recherche pour les termes « Dynamic background » « Dynamic background panels » et activez toutes les permissions connexes pour le rôle « Administrateur ». Ensuite, défilez jusqu'au bas de la page, puis cliquez sur le bouton Enregistrer les droits d'accès.

2. Configurer les paramètres

  1. Allez à Configuration. Sous INTERFACE UTILISATEUR, cliquez sur Dynamic background. Ici, vous verrez un message indiquant que vous n'avez pas encore configuré votre image d'arrière-plan. Dans le coin supérieur droit de la page, cliquez sur l'onglet Paramètres.
  2. Sous l'onglet Paramètres, saisissez les valeurs suivantes dans les champs correspondants :
    1. Number of images (Nombre d'images) : Indiquez le nombre d'images que vous souhaitez téléverser.
    2. Upload path (Chemin de téléversement) : Saisissez le mot « background ».
    3. Allowed file types (Types de fichiers autorisés) : Laissez les valeurs par défaut telles quelles.
    4. Image style (Style d'image) : Sélectionnez « Aucun style ».
    5. CSS selector (Sélecteur CSS) : Saisissez la valeur « #page-wrapper ».
    6. CSS : Copiez et collez les attributs ci-dessous.

      background-attachment: fixed;
      background-clip: border-box;
      background-color: transparent;
      background-origin: padding-box;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      height: auto !important;
      margin-bottom: -110px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0;
      min-height: 100%;
      width: 100%;
  3. Lorsque vous avez terminé, cliquez sur le bouton Enregistrer la configuration.
  4. Répétez les étapes 2.2 et 2.3 pour l'onglet Panels (Panneaux) situé dans le coin supérieur droit de la page. Si vous ne voyez pas cet onglet, veuillez vérifier les droits d'accès (étape 1.2).

3. Télécharger et ajouter l'image d'arrière-plan

  1. Continuant de l'étape 2, cliquez sur l'onglet Background Images (Images d'arrière-plan) situé dans le coin supérieur droit de la page.
  2. Sous Background image (Image d'arrière-plan 1), cliquez sur le bouton Choisir un fichier afin de sélectionner le fichier que vous voulez mettre dans l'arrière-plan. Répétez cette étape pour toute autre image que vous souhaitez utiliser. Lorsque vous avez terminé, cliquez sur le bouton Enregistrer la configuration au bas de la page pour téléverser les fichiers.
  3. Lorsque la page est rechargée, vous verrez l'option « Use picture as background (Utiliser comme image d'arrière-plan) » à côté de chaque image. Le fait de sélectionner cette option fera en sorte que l'image deviendra l'image d'arrière-plan de tout le site.

    Si vous voulez seulement activer l'image d'arrière-plan sur une page particulière (cette option s'offre aux pages de panneaux seulement), suivez les étapes ci-dessous :
    1. Allez à StructurePages. Modifiez la page où vous souhaitez ajouter une image d'arrière-plan.
    2. Dans le menu de gauche, cliquez sur l'onglet Général.
    3. Au bas de la page, cliquez sur la section Dynamic Background pour l'agrandir. Vous devriez voir les images que vous avez ajoutées à l'étape 3.2. Sélectionnez « Use as background (Utiliser comme image d'arrière-plan) », puis cliquez sur le bouton Mettre à jour et enregistrer.
» Envoyer vos commentaires
    Sujets: 
  • Soutien
    Types: 
  • Tutoriels
Haut de page