Comment ajouter une image d’arrière-plan dans WordPress (6 façons simples)

Vous souhaitez ajouter une image d’arrière-plan à votre site WordPress ?

Les images d’arrière-plan peuvent rendre votre site plus attrayant et plus vivant.

Dans cet article, nous allons vous afficher comment ajouter facilement une image d’arrière-plan à votre site WordPress.

Pourquoi ajouter une image d’arrière-plan sur WordPress ?

L’ajout d’une image à votre site WordPress peut le rendre plus attrayant pour les internautes. Vous pouvez rapidement attirer l’attention des utilisateurs/utilisatrices et les engager avec votre contenu.

Il vous permet également de personnaliser la conception de votre site en fonction de votre marque. Par exemple, vous pouvez téléverser des photos subtiles de vos produits ou de la mascotte de votre marque en arrière-plan.

En outre, vous pouvez également ajouter une vidéo YouTube en arrière-plan complet ou un diaporama d’images qui donnera vie à votre contenu.

Cependant, nous suggérons de sélectionner des images d’arrière-plan qui ne sont pas distrayantes ou qui ne rendent pas difficile la lecture du contenu de votre blog WordPress. Un arrière-plan doit améliorer l’expérience de l’utilisateur et aider à transmettre votre message aux internautes.

Il est également important de choisir une image d’arrière-plan adaptée aux mobiles et qui n’aura pas d’impact sur la vitesse de votre site. Dans le cas contraire, elle nuira au référencement de votre site WordPress.

Cela dit, examinons les différentes façons d’ajouter une image d’arrière-plan WordPress. Nous couvrirons plusieurs méthodes, y compris l’utilisation du personnalisateur de thème WordPress, de l’éditeur de site complet, d’un plugin, du constructeur de thème, et plus encore.

Il vous suffit de cliquer sur un des liens ci-dessous pour accéder à la section de votre choix :

• Ajouter une image d’arrière-plan en utilisant l’Outil de personnalisation de votre thème WordPress
• Ajouter une image d’arrière-plan personnalisée en utilisant l’éditeur/éditrices de site complet
• Ajouter une image d’arrière-plan en utilisant le Constructeur de thème WordPress
• Ajouter une image d’arrière-plan personnalisée sur WordPress à l’aide d’une extension
• Ajouter des images d’arrière-plan en utilisant la bannière CSS d’accroche
• Ajouter des images d’arrière-plan personnalisées n’importe où dans WordPress en utilisant le code CSS

Méthode 1. Ajouter une image d’arrière-plan à l’aide du personnalisateur de votre thème WordPress

La plupart des thèmes WordPress populaires sont livrés avec un support d’arrière-plan personnalisé. Cette fonctionnalité vous permet de définir facilement une image d’arrière-plan, et nous recommandons cette méthode si votre thème la supporte.

Cependant, si l’option de menu du personnalisateur est absente, il se peut que l’édition de site complète soit activée dans votre thème. Dans la section suivante, nous verrons comment utiliser l’éditeur de site complet pour modifier votre image d’arrière-plan.

Pour utiliser l’Outil de personnalisation, vous devez vous rendre sur la page Apparence  » Personnaliser dans l’interface d’administration de WordPress. Cela lancera le personnalisateur de thème WordPress où vous pouvez modifier différents réglages de thème tout en visualisant un aperçu en direct de votre site.

Une chose importante à retenir est que les options que vous voyez varient en fonction du thème WordPress que vous utilisez. Pour ce tutoriel, nous utilisons le thème Astra.

Si vous utilisez un thème différent, vous devrez peut-être consulter la documentation de ce thème ou contacter le développeur du thème pour savoir comment ajouter une image d’arrière-plan si vous ne la trouvez pas dans le personnalisateur.

Dans les options du personnalisateur du thème Astra, vous devez cliquer sur  » Global  » dans le panneau de gauche.

Ensuite, vous verrez différentes options globales pour personnaliser votre thème Astra.

Cliquez sur la section « Couleurs ».

Ici, vous pouvez modifier les couleurs du thème, y compris la couleur d’arrière-plan. Vous pouvez également personnaliser vos liens, le corps du texte, les titres, les bordures, etc.

Pour ajouter une image d’arrière-plan, défilez vers le bas jusqu’à la section « Couleur de surface ». Vous pouvez ensuite cliquer sur l’option « Arrière-plan du site » et passer à l’onglet « Image ».

Cliquez ensuite sur le bouton « Sélectionner une image d’arrière-plan ».

Sélectionné, la médiathèque de WordPress s’affiche. Vous pouvez y téléverser une image depuis votre ordinateur ou sélectionner une image que vous avez déjà téléversée.

Après avoir choisi l’image pour votre arrière-plan, vous devez cliquer sur le bouton « Sélectionné ».

Cela fermera la fenêtre surgissante des médias, et vous verrez une Prévisualisation de votre image d’arrière-plan sélectionnée dans le client/cliente personnalisé du thème.

N’oubliez pas de cliquer sur le bouton « Publier » en haut de la page pour stocker vos Réglages.

C’est tout. Vous avez bien ajouté une image d’arrière-plan à votre site WordPress. Allez-y et visitez votre site pour la voir en action.

Méthode 2. Ajouter une image d’arrière-plan personnalisée à l’aide de l’éditeur/éditrices de site complet

Si vous utilisez un thème WordPress basé sur des blocs, vous pouvez ajouter une image d’arrière-plan personnalisée à l’aide de l’éditeur de site complet (Éditeur de site).

L’éditeur de site complet vous autorise à modifier la conception de votre site à l’aide de blocs. C’est exactement comme modifier un article de blog ou une page à l’aide de l’éditeur de blocs de WordPress.

Pour ce tutoriel, nous utiliserons le thème par défaut Twenty Twenty-Two. Pour lancer l’éditeur de site complet, il suffit d’aller dans Apparence  » Éditeur depuis votre Tableau de bord WordPress.

Une fois que vous êtes dans l’éditeur du site complet, vous devez ajouter un bloc Couverture à votre Modèle pour téléverser une image d’arrière-plan.

Il suffit de cliquer sur le signe « + » en haut et d’ajouter un bloc de couverture.

Cliquez sur le bouton « Téléversé » ou « Bibliothèque média » dans le bloc de couverture pour ajouter une image d’arrière-plan au bloc.

La fenêtre surgissante de l’outil Téléversement des médias de WordPress s’ouvre.

Vous pouvez choisir une image que vous souhaitez utiliser comme arrière-plan du site.

Une fois l’image choisie, il suffit de cliquer sur le bouton « Sélectionné ».

Une fois l’image ajoutée au bloc Couverture, l’étape suivante consiste à la définir comme arrière-plan de la page.

Pour ce faire, cliquez sur l’icône Vue de liste en haut (icône avec 3 tirets) pour ouvrir une vue d’ensemble des éléments du thème, tels que l’en-tête et le pied de page du site.

Ensuite, il suffit de faire glisser et de déposer tous les éléments du modèle sous le bloc Couverture dans la vue en liste.

Lorsqu’ils sont tous là, l’image du bloc de couverture s’affiche comme arrière-plan du site.

Ensuite, vous pouvez ajuster l’image d’arrière-plan en cliquant sur le bloc Couverture et en sélectionnant l’icône de l’engrenage dans le coin supérieur droit de l’écran. Cela ouvre le panneau des Réglages du bloc.

Vous trouverez des options pour faire de l’image un arrière-plan corrigé, un arrière-plan répétitif, ajuster sa superposition, modifier sa couleur, etc.

Lorsque vous avez terminé, n’oubliez pas de cliquer sur le bouton « Enregistrer ».

Vous avez réussi à ajouter une image de fond à l’aide de l’éditeur de site complet. Vous avez bien ajouté une image d’arrière-plan à l’aide de l’éditeur de site complet.

Méthode 3. Ajouter une image d’arrière-plan en utilisant le Constructeur de thème WordPress

Une autre façon d’ajouter des images d’arrière-plan personnalisées à votre site est d’utiliser un client/cliente de thème WordPress comme SeedProd.

C’est la meilleure extension de page d’atterrissage WordPress et le constructeur de page web. Vous bénéficiez de la fonctionnalité drag and drop pour personnaliser facilement la conception de votre site web sans toucher à une seule ligne de code.

Pour ce tutoriel, nous utiliserons la version SeedProd Pro car elle inclut le constructeur de thème. Il existe également une version SeedProd Lite que vous pouvez essayer gratuitement.

Tout d’abord, vous devrez installer et activer l’extension SeedProd. Si vous avez besoin d’aide, veuillez consulter notre guide sur l ‘installation d’une extension WordPress.

Une fois l’extension activée, vous verrez l’écran de bienvenue de SeedProd dans votre Tableau de bord WordPress. Saisissez ensuite votre clé de licence et cliquez sur le bouton  » Vérifier la clé « . Vous pouvez trouver la clé de licence dans votre zone de compte SeedProd.

Ensuite, vous devrez vous rendre dans SeedProd  » Theme Constructeur dans votre panneau d’administration WordPress.

Cliquez sur le bouton « Thèmes » en haut de la page.

SeedProd proposera désormais plusieurs modèles de thèmes à choisir.

Vous pouvez survoler n’importe quel Modèle que vous souhaitez utiliser et cliquer dessus. Pour ce tutoriel, nous allons utiliser le thème  » Starter theme « .

À partir de là, SeedProd va générer différents modèles tels que la page d’accueil, la publication unique, la page unique, la colonne latérale, l’en-tête, et plus encore.

Pour ajouter une image d’arrière-plan qui apparaîtra sur l’ensemble du site et sur tous les modèles de thèmes, cliquez sur l’option « Modifier le design » sous CSS global.

Sur l’écran suivant, vous verrez les réglages CSS globaux que vous pouvez modifier.

Il suffit de cliquer sur l’option « Arrière-plan ».

Les options d’image d’arrière-plan s’affichent ensuite.

Cliquez sur le bouton « Utiliser votre propre image » pour téléverser votre image ou cliquez sur le bouton « Utiliser une image de stock » pour rechercher une image de stock à utiliser comme arrière-plan de votre site.

Une fois que vous avez ajouté une image d’arrière-plan, le Constructeur SeedProd affiche une Prévisualisation directe.

L’extension propose également des options permettant de modifier la position de l’arrière-plan. Vous pouvez choisir d’utiliser la couverture en plein écran, de la mettre en répétition, et plus encore.

De plus, vous pouvez modifier le degré d’assombrissement de l’arrière-plan en déplaçant le curseur « Dim Background ». Plus le score est élevé, plus l’image est sombre.

Lorsque vous avez fini de modifier l’image d’arrière-plan, cliquez simplement sur le bouton « Enregistrer » en haut et fermez les Réglages CSS globaux.

Si vous souhaitez ajouter une image d’arrière-plan personnalisée pour différentes parties de votre site, vous pouvez modifier ces éléments de modèles de thèmes individuels dans SeedProd.

Pour plus de détails, veuillez consulter notre guide sur la façon de créer facilement un thème WordPress personnalisé.

Méthode 4. Ajouter une image d’arrière-plan personnalisée dans WordPress à l’aide d’une extension

L’utilisation d’une extension WordPress pour ajouter une image d’arrière-plan est beaucoup plus flexible que les options intégrées de WordPress.

Pour commencer, vous devez installer et activer l’extension Full Screen Background Pro. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Cette extension vous permettra de définir un arrière-plan différent pour n’importe quelle publication, page, catégorie, et plus encore. De plus, ils seront automatiquement en plein écran et s’ajusteront pour les appareils mobiles.

Une fois activé, vous devez visiter Apparence  » Fullscreen BG Image pour définir les paramètres de l’extension.

Il vous sera demandé d’ajouter votre clé de licence. Vous pouvez obtenir cette information à partir de l’e-mail que vous avez reçu après avoir acheté l’extension ou à partir de votre compte sur le site de l’extension.

Ensuite, vous devez cliquer sur le bouton  » Enregistrer les options  » pour activer votre clé. Vous êtes maintenant prêt à commencer à ajouter des images d’arrière-plan à votre site WordPress.

Cliquez sur le bouton « Ajouter une nouvelle image » sur la page des Réglages de l’extension.

L’écran de téléversement de l’image d’arrière-plan doit s’afficher.

Cliquez sur le bouton « Choisissez une image » pour téléverser ou sélectionner une image. Dès que vous aurez sélectionné l’image, vous pourrez voir une Prévisualisation en direct de l’image sur votre écran.

Ensuite, vous devez donner un nom à cette image. Ce nom vous est réservé, vous pouvez donc taper n’importe quoi ici. Enfin, vous devez sélectionner l’endroit où vous souhaitez utiliser cette image comme page d’arrière-plan.

Une fois que vous avez choisi l’arrière-plan pour l’ensemble du site, pour les publications, les catégories, les archives ou autres, n’oubliez pas d’enregistrer vos modifications.

Vous pouvez ajouter autant d’images que vous le souhaitez à différentes zones de votre site en visitant la page Apparence  » Image BG plein écran et en répétant ce processus.

Si vous définissez plus d’une image à utiliser globalement ou pour les publications, les pages et les catégories, alors l’extension commencera automatiquement à afficher les images d’arrière-plan sous forme de diaporama.

Vous pouvez ajuster le temps nécessaire à l’effacement d’une image et le temps après lequel une nouvelle image d’arrière-plan commence à s’effacer dans les Réglages de l’extension.

Le temps saisi/saisie est exprimé en millisecondes. 1 seconde correspond à 1000 millisecondes. Si vous souhaitez qu’une image d’arrière-plan disparaisse au bout de 20 secondes, vous devez saisir 20000.

N’oubliez pas de cliquer sur le bouton « Enregistrer les options » pour stocker vos modifications.

Images d’arrière-plan pour les publications, les pages et les catégories

Full Screen Background Pro vous permet également de définir des images d’arrière-plan pour des publications uniques, des pages, des catégories, des identifiés, etc.

Il vous suffit de modifier la publication ou la page dans laquelle vous souhaitez afficher une image d’arrière-plan différente. Sur l’écran de modification de l’article, vous remarquerez la nouvelle case « Image d’arrière-plan en plein écran » sous l’éditeur de l’article.

Pour utiliser une image d’arrière-plan pour les catégories, les articles et les pages, vous devez vous rendre sur la page Apparence  » Fullscreen BG Image, puis cliquer sur le bouton  » Ajouter une nouvelle image « .

Après avoir téléversé votre image, vous pouvez sélectionner une catégorie, des publications, des pages, des archives et d’autres options dans le menu déroulant « Choisissez le contexte sur lequel afficher cette image ».

Imaginons que vous souhaitiez afficher une image d’arrière-plan pour les pages de catégories. Pour cela, il vous suffit de sélectionner « Catégorie » dans le menu déroulant.

L’extension offre également une option permettant de restreindre l’image d’arrière-plan à des catégories, des publications et des pages spécifiques.

Par exemple, si vous souhaitez ajouter une image d’arrière-plan personnalisée pour des catégories spécifiques, il vous suffit de saisir les noms des catégories dans le champ « Sélectionner les catégories auxquelles restreindre les images ».

N’oubliez pas d’enregistrer votre image pour stocker vos Réglages.

Vous avez bien ajouté une image d’arrière-plan pour des publications, des pages et des catégories spécifiques.

Méthode 5. Ajouter des images d’arrière-plan à l’aide de la bannière CSS d’accroche

CSS Hero est une extension WordPress qui vous permet d’apporter n’importe quelle modification à votre thème sans toucher à une seule ligne de code.

Vous pouvez ajouter rapidement des images d’arrière-plan en quelques étapes simples. Tout d’abord, vous devez installer et activer CSS Hero. Pour plus de détails, veuillez consulter notre guide sur l ‘installation d’une extension WordPress.

Une fois que vous avez fait cela, il est temps de commencer à personnaliser votre site. Ouvrez votre page d’accueil dans votre navigateur. Vous verrez le lien « Personnaliser avec CSS Hero » dans votre barre d’administration.

Après avoir cliqué sur ce lien, vous verrez les options de la bannière d’accroche CSS s’ouvrir. Survolez avec votre souris la zone à laquelle vous souhaitez ajouter une image.

Lorsque vous cliquez sur la zone sélectionnée, vous pouvez voir l’option « Arrière-plan » dans la colonne latérale gauche.

Cliquez sur « Arrière-plan » pour afficher les Réglages pour l’ajout d’une image.

À partir de là, vous pouvez cliquer sur  » Image « . Maintenant, vous pouvez choisir une image sur Unsplash ou téléverser la vôtre pour créer votre arrière-plan.

Lorsque vous cliquez sur l’image souhaitée, le bouton « Appliquer l’image » apparaît. Vous pouvez alors choisir la taille de votre image. Vous pouvez choisir la version la plus grande pour qu’elle s’étende sur toute la page.

Cliquez sur « Enregistrer et publier » en bas de la page pour enregistrer l’image d’arrière-plan pour votre site.

Méthode 6. Ajouter des images d’arrière-plan personnalisées n’importe où dans WordPress en utilisant le code CSS

Par défaut, WordPress ajoute plusieurs classes CSS à différents éléments HTML de votre site WordPress. Vous pouvez facilement ajouter des images d’arrière-plan personnalisées à des publications individuelles, des catégories, des auteurs/autrices et d’autres pages en utilisant ces classes CSS générées par WordPress.

Par exemple, si votre site comporte une catégorie intitulée « TV », WordPress ajoutera automatiquement ces classes CSS à l’identifiant « body » lorsqu’une personne consultera la page de la catégorie « TV ».

<body class="archive category category-tv category-4">

Vous pouvez utiliser l’outil d’inspection pour voir exactement quelles classes CSS sont ajoutées par WordPress à l’identifiant body.

Vous pouvez utiliser la classe CSS category-tv ou category-4 pour styliser différemment cette page de catégorie.

Ajoutons une image d’arrière-plan personnalisée à une page d’archive de catégorie. Vous devrez ajouter ce CSS personnalisé à votre thème.

body.category-tv {
background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

N’oubliez pas de remplacer l’URL de l’image d’arrière-plan et la classe de catégorie par celles de votre propre site.

Vous pouvez également ajouter des arrière-plan personnalisés à des publications et des pages individuelles. WordPress ajoute une classe CSS avec l’ID de la publication ou de la page dans l’identifié du corps. Vous pouvez utiliser le même code CSS, en remplaçant simplement .category-tv par la classe CSS spécifique à la publication.

Nous espérons que cet article vous a aidé à apprendre comment ajouter une image d’arrière-plan sur WordPress. Vous pouvez également consulter notre guide sur la façon de démarrer un stock en ligne et le meilleur logiciel de conception de site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.