Comment ajouter une image d'arrière-plan dans WordPress (6 méthodes faciles)

Les images d'arrière-plan peuvent complètement transformer l'apparence et l'ambiance de votre site WordPress. Mais les images étirées, un mauvais alignement ou des problèmes de taille de fichier peuvent vous gêner. Surtout si vous n'êtes pas sûr de la méthode à utiliser.

D'après notre expérience dans la gestion de dizaines de sites WordPress, nous avons appris que la plupart des gens rendent ce processus beaucoup plus difficile qu'il ne le devrait.

La bonne nouvelle est que WordPress offre plusieurs options intégrées pour ajouter des images d'arrière-plan, et il existe d'excellents plugins qui le rendent encore plus facile. Une fois que vous connaissez les bonnes méthodes, vous pouvez ajouter de magnifiques arrière-plans à l'ensemble de votre site, à des pages individuelles ou à des sections spécifiques en quelques clics seulement.

Dans ce guide, nous vous montrerons 5 méthodes fiables pour ajouter des images d'arrière-plan dans WordPress qui conviennent à tous les niveaux de compétence. 🎨

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

Ajouter une image à votre site Web WordPress peut le rendre plus attrayant pour les visiteurs. Vous pouvez rapidement capter l'attention des utilisateurs et les engager avec votre contenu.

Cela vous permet également de personnaliser le design de votre site Web en fonction de votre marque. Par exemple, vous pouvez télécharger des photos subtiles de vos produits ou de votre mascotte de marque en arrière-plan.

De plus, vous pouvez ajouter une vidéo YouTube comme arrière-plan complet ou un diaporama d'images qui donnera vie à votre contenu.

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

De plus, il est important de choisir une image d'arrière-plan adaptée aux mobiles et qui n'affectera pas la vitesse de votre site web. Sinon, cela nuira à votre SEO WordPress.

Dans cet article, nous partagerons différentes façons d'ajouter une image d'arrière-plan WordPress.

Nous couvrirons plusieurs méthodes, y compris le personnalisateur de thème WordPress, l'éditeur de site complet, les plugins, les constructeurs de thèmes, et plus encore. Cliquez simplement sur le lien ci-dessous pour accéder à la section de votre choix :

• Méthode 1. Ajouter une image d'arrière-plan à l'aide de votre personnalisateur de thème WordPress
• Méthode 2. Ajouter une image d'arrière-plan personnalisée à l'aide de l'éditeur de site complet
• Méthode 3. Ajouter une image d'arrière-plan à l'aide d'un constructeur de thème WordPress
• Méthode 4. Ajouter une image d'arrière-plan à l'aide de CSS Hero
• Méthode 5. Ajouter des images d'arrière-plan personnalisées n'importe où dans WordPress à l'aide de code CSS
• Ressources bonus : Guides sur les fichiers image et multimédias pour améliorer l'expérience utilisateur de votre site WordPress

Prêt ? Commençons.

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

La plupart des thèmes WordPress populaires prennent en charge les arrière-plans personnalisés. Cette fonctionnalité vous permet de définir facilement une image d'arrière-plan. Nous recommandons cette méthode si votre thème la prend en charge.

Cependant, si votre option de menu du personnalisateur est manquante, votre thème peut avoir l'édition complète du site activée. Dans la section suivante, nous expliquerons comment utiliser l'éditeur de site complet pour changer votre image d'arrière-plan.

En attendant, pour utiliser le « Personnalisateur », vous devez visiter la page Apparence » Personnaliser dans votre administration WordPress.

Cela lancera le personnalisateur de thème WordPress, qui vous permet de modifier différents paramètres du thème tout en visualisant un aperçu en direct de votre site web.

Notez que les options que vous voyez varieront en fonction du thème WordPress que vous utilisez. Dans ce tutoriel, nous utilisons le thème Sydney.

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

Dans les options du personnaliseur du thème Sydney, vous devez cliquer sur « Général » dans le panneau de gauche.

Une fois que vous avez fait cela, vous verrez différentes options « Général » pour personnaliser votre thème Sydney.

À ce stade, vous devrez cliquer sur la section « Image d'arrière-plan ».

Sur l'écran suivant, vous verrez l'option pour ajouter votre image d'arrière-plan.

Allez-y et cliquez sur le bouton « Sélectionner une image ».

Cela ouvrira la médiathèque WordPress.

Ici, vous pouvez télécharger une image depuis votre ordinateur ou en sélectionner une que vous avez déjà téléchargée.

Une fois que vous avez choisi l'image pour votre arrière-plan, vous devrez cliquer sur le bouton « Sélectionner ».

Cela fermera la fenêtre contextuelle des médias, et vous verrez un aperçu de votre image d'arrière-plan sélectionnée dans le personnaliseur de thème.

Dans le panneau de gauche, vous pouvez ajuster la position de l'image (haut, centre, bas, gauche, droite) pour contrôler son affichage en arrière-plan. Vous pouvez également la redimensionner en utilisant le menu déroulant « Taille de l'image » menu déroulant pour ajuster, remplir ou couvrir la zone.

Si vous souhaitez que l'image se répète sur tout l'arrière-plan, cochez la case « Répéter l'image d'arrière-plan ». Vous pouvez également faire défiler l'image avec le contenu de la page en cochant la case « Faire défiler avec la page ».

Une fois que vous êtes satisfait du résultat, cliquez sur le bouton « Publier » en haut pour enregistrer vos paramètres.

C'est tout. Vous avez ajouté avec succès une image d'arrière-plan à votre site WordPress. Allez visiter votre site web pour la voir en action.

Méthode 2. Ajouter une image d'arrière-plan personnalisée à l'aide de l'éditeur 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 en utilisant l'éditeur complet du site (FSE).

L'éditeur complet du site vous permet de modifier la conception de votre site web à l'aide de blocs. C'est comme modifier un article de blog ou une page en utilisant l'éditeur de blocs WordPress.

Pour ce tutoriel, nous utiliserons le thème par défaut « Twenty Twenty-Two ». Pour lancer l'éditeur complet du site, allez simplement dans Apparence » Éditeur depuis votre zone d'administration WordPress.

Une fois dans l'éditeur de site complet, vous devrez ajouter un bloc « Couverture » à votre modèle pour télécharger une image d'arrière-plan.

Cliquez simplement sur le signe « + » en haut et ajoutez un bloc « Couverture ».

Pour ajouter une image d'arrière-plan au bloc « Couverture », cliquez sur le bouton « Télécharger » ou « Médiathèque ».

Cela ouvrira la fenêtre contextuelle de téléversement des médias WordPress.

La prochaine étape consiste à choisir une image que vous souhaitez utiliser comme arrière-plan du site Web.

Lorsque vous avez choisi l'image, cliquez simplement sur le bouton « Sélectionner ».

Une fois l'image ajoutée au bloc « Couverture », vous devrez la définir comme arrière-plan de la page.

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

Après cela, faites simplement glisser et déposez tous les éléments du modèle sous le bloc « Couverture » dans la vue de liste.

Une fois qu'ils sont tous là, l'image du bloc « Couverture » s'affichera comme arrière-plan du site.

Après cela, vous pouvez ajuster l'image d'arrière-plan en cliquant sur le bloc « Couverture » et en sélectionnant l'icône d'engrenage dans le coin supérieur droit de l'écran. Cela ouvrira le panneau des paramètres « Bloc ».

Ici, vous trouverez des options pour faire de l'image un arrière-plan fixe, ajuster son superposition, modifier la couleur, et plus encore.

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

Et voilà ! Vous avez ajouté avec succès une image d'arrière-plan à l'aide de l'éditeur de site complet.

Méthode 3. Ajouter une image d'arrière-plan à l'aide d'un constructeur de thème WordPress

Une autre façon d'ajouter des images d'arrière-plan personnalisées à votre site Web est d'utiliser un constructeur de thèmes WordPress comme SeedProd. C'est le meilleur plugin de page de destination WordPress avec une fonctionnalité de glisser-déposer qui vous permet de personnaliser facilement la conception de votre site Web sans toucher une seule ligne de code.

Nous utilisons également SeedProd sur certains de nos sites de marque, et cela fonctionne très bien. Pour plus de détails sur notre expérience, vous pouvez consulter notre évaluation approfondie de SeedProd.

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

Tout d'abord, vous devrez installer et activer le plugin SeedProd. Si vous avez besoin d'aide, veuillez consulter notre guide sur comment installer un plugin WordPress.

Après l'activation, vous verrez l'écran de bienvenue de SeedProd dans votre tableau de bord WordPress.

Ensuite, vous devrez entrer votre clé de licence et cliquer sur le bouton « Vérifier la clé » pour activer la version pro du plugin. Vous pouvez trouver votre clé de licence dans votre espace client SeedProd.

Une fois que tout est configuré, vous devrez vous rendre sur SeedProd » Constructeur de thèmes dans votre panneau d'administration WordPress.

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

SeedProd vous proposera désormais plusieurs modèles de thèmes parmi lesquels choisir.

Vous pouvez survoler et cliquer sur n'importe quel modèle que vous souhaitez utiliser. Pour ce tutoriel, nous utiliserons le modèle de thème « Starter ».

À partir de là, SeedProd générera différents modèles tels que la page d'accueil, les articles uniques, les pages uniques, la barre latérale, l'en-tête, et plus encore.

Pour ajouter une image d'arrière-plan qui apparaît sur l'ensemble du site Web 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 paramètres CSS globaux que vous pouvez modifier.

Cliquez simplement sur l'option « Arrière-plan » pour commencer la personnalisation.

Après cela, vous verrez les options « Image d'arrière-plan ».

Cliquez sur « Utiliser votre propre image » pour télécharger votre photo. Alternativement, vous pouvez cliquer sur le bouton « Utiliser une image de stock » pour rechercher une image de stock à utiliser comme arrière-plan de votre site Web.

Une fois que vous avez ajouté une image d'arrière-plan, le constructeur SeedProd affichera un aperçu en direct.

Vous pouvez ajuster la position de l'arrière-plan si nécessaire. Vous pouvez également choisir d'utiliser la couverture plein écran ou de la répéter, entre autres options.

De plus, vous pouvez modifier le niveau d'obscurité de votre image d'arrière-plan en déplaçant le curseur « Assombrir l'arrière-plan ». Plus le score est élevé, plus l'image sera sombre.

Une fois que vous avez terminé de modifier l'image d'arrière-plan, cliquez simplement sur le bouton « Enregistrer » en haut et fermez les paramètres CSS globaux.

Si vous souhaitez ajouter une image d'arrière-plan personnalisée pour différentes parties de votre site Web, vous pouvez modifier ces modèles de thème individuels dans SeedProd. Pour plus de détails, n'hésitez pas à consulter notre guide sur comment créer facilement un thème WordPress personnalisé.

Méthode 4. Ajouter une image d'arrière-plan à l'aide de CSS Hero

CSS Hero est un plugin WordPress qui vous permet d'apporter des modifications à votre thème sans coder.

Vous pouvez ajouter des images d'arrière-plan rapidement en quelques étapes simples. Mais d'abord, vous devrez installer et activer CSS Hero. Pour plus de détails, veuillez consulter notre guide sur comment installer un plugin WordPress.

Une fois que vous avez fait cela, vous pouvez commencer à personnaliser votre site Web.

La première chose à faire est d'ouvrir votre page d'accueil dans votre navigateur. Là, vous verrez le lien « Personnaliser avec CSS Hero » dans votre barre d'administration.

Cliquez simplement sur le lien, et vous verrez les options de CSS Hero s'ouvrir.

Une fois à l'intérieur, vous devrez survoler la zone où vous souhaitez ajouter une image. Ensuite, cliquez sur la zone pour accéder à l'option « Arrière-plan » dans la barre latérale gauche.

Cliquez sur « Arrière-plan » pour voir les paramètres d'ajout d'une image.

À partir de là, cliquez simplement sur « Image ».

Ensuite, vous pouvez choisir une image sur Unsplash ou télécharger la vôtre pour créer votre arrière-plan.

Lorsque vous cliquez sur l'image souhaitée, vous verrez le bouton « Appliquer l'image ».

Ensuite, vous voudrez peut-être choisir la taille de votre image. Nous recommandons de choisir la grande version afin qu'elle s'étire sur toute la page.

Enfin, vous pouvez cliquer sur « Enregistrer et publier » en bas pour enregistrer l'image d'arrière-plan de votre site.

Méthode 5. Ajouter des images d'arrière-plan personnalisées n'importe où dans WordPress à l'aide de code CSS

Par défaut, WordPress ajoute plusieurs classes CSS à différents éléments HTML sur votre site WordPress. Ainsi, vous pouvez facilement ajouter des images d'arrière-plan personnalisées à des articles individuels, des catégories, des auteurs et d'autres pages en utilisant ces classes CSS générées par WordPress.

Par exemple, si vous avez une catégorie sur votre site web appelée TV, WordPress ajoutera automatiquement ces classes CSS à la balise body lorsqu'une personne consulte la page de la catégorie TV.

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

Vous pouvez utiliser l'outil d'inspection pour voir quelles classes CSS WordPress ajoute à la balise body. Voici un exemple :

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

Par exemple, ajoutons une image d'arrière-plan personnalisée à la page d'archive de catégorie.

Bien qu'il soit courant de modifier le fichier functions.php d'un thème pour ajouter du code CSS, ce n'est pas sûr et pas très convivial pour les débutants. Une petite erreur et vous risquez de casser votre site web.

C'est pourquoi nous recommandons toujours d'utiliser WPCode à la place. C'est le meilleur plugin pour ajouter des extraits de code personnalisés sans trop de difficultés.

Nous utilisons WPCode pour ajouter et gérer des extraits de code sur nos marques. Cela a été un moyen simple et efficace de rester organisé et de faire en sorte que les choses se déroulent sans problème. Si vous souhaitez en savoir plus, consultez notre avis détaillé sur WPCode.

Pour ce faire, installons et activons le plugin WPCode. Si vous avez besoin d'aide, vous pouvez consulter notre guide sur comment installer un plugin WordPress.

Après l'activation, naviguez simplement vers Extraits de code » + Ajouter nouveau depuis votre espace d'administration WordPress.

Sur l'écran suivant, vous devrez survoler l'option « Ajouter votre code personnalisé (Nouvel extrait) » et cliquer sur le bouton « Utiliser l'extrait » lorsqu'il apparaît.

Sur l'écran suivant, vous pouvez commencer par ajouter un titre pour votre extrait CSS personnalisé. Vous voudrez peut-être choisir quelque chose de simple et de pertinent, car cela vous aidera à reconnaître le code plus tard.

Après cela, vous pouvez taper ou coller le CSS personnalisé suivant dans la boîte « Aperçu du code ».

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.

Voici à quoi cela pourrait ressembler dans l'éditeur WPCode :

Vous devrez ensuite définir le « Type de code » en sélectionnant « Extrait CSS » dans le menu déroulant.

Une fois que tout semble correct, vous pouvez activer le commutateur pour activer l'extrait de code et cliquer sur « Enregistrer l'extrait ».

De plus, vous pouvez ajouter des arrière-plans personnalisés à des articles et pages individuels.

WordPress possède une classe CSS avec l'ID de l'article ou de la page dans la balise body. Vous pouvez utiliser le même code CSS et simplement remplacer .category-tv par la classe CSS spécifique à l'article.

Pour plus de détails, consultez notre tutoriel sur comment ajouter du CSS personnalisé dans WordPress.

Ressources bonus : Guides sur les fichiers image et multimédias pour améliorer l'expérience utilisateur de votre site WordPress

Nous espérons que cet article vous a aidé à apprendre comment ajouter une image d'arrière-plan dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur :

• Comment ajouter correctement des images dans WordPress
• Comment créer une galerie d'images dans WordPress
• Comment créer un curseur vidéo et image WordPress
• Comment ajouter des miniatures aux liens des articles précédents et suivants dans WordPress
• Comment intégrer Spotify dans WordPress
• Comment intégrer des podcasts Apple dans WordPress
• Le meilleur logiciel de conception de sites web
• Comment optimiser les images pour les performances web sans perdre en qualité

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.