Comment ajouter correctement des images d'arrière-plan WordPress à votre site Web ?
Publié: 2022-01-06L'ajout d'images d'arrière-plan WordPress à votre site Web est-il facile ? La réponse est oui pour la plupart à moins que votre thème ne le supporte pas.
La vérité est que de nombreux thèmes WordPress offrent aujourd'hui des moyens simples d'ajouter et de modifier des images d'arrière-plan existantes.
Vous pouvez également modifier les images d'arrière-plan WordPress à l'aide de CSS ou d'un plugin, ce qui ouvre des options pour définir l'image d'arrière-plan sur les pages, les publications et les catégories.
Cet article vous montrera comment faire tout ce qui précède pour que votre site Web se démarque avec un aspect accrocheur.
Que sont les images de fond WordPress ?
Une image d'arrière-plan WordPress est une image appliquée derrière le contenu principal. Au lieu d'être l'objectif principal de votre site Web, comme une image de héros, ils sont souvent plus subtils et complètent d'autres contenus sur vos pages Web.
En plus d'aider à créer des pages Web qui offrent une meilleure expérience de lecture, les images d'arrière-plan WP offrent de nombreuses possibilités de conception qui distinguent votre site Web de ses concurrents.
Être différent des concurrents signifie augmenter la notoriété de votre marque en mettant un effort supplémentaire dans la conception de votre site Web, ce qui n'est pas toujours facile. Dans de tels cas, vous pouvez demander à une agence numérique des services de conception Web professionnels.
Mais pourquoi voulez-vous changer le fond? Eh bien, celui par défaut peut ne pas vous plaire ou ne pas ressembler à votre marque. Ou peut-être que ce n'est pas du tout une image, juste une couleur unie. Ou peut-être avez-vous aimé celui qui existe au début, mais vous vous ennuyez maintenant.
Quelle que soit la raison, essayons de la changer.
Utilisez le personnalisateur WordPress par défaut pour ajouter une image d'arrière-plan WordPress
Les thèmes WordPress offrent généralement un moyen simple d'utiliser une couleur ou une image en arrière-plan. La plupart des gens choisissent de changer la couleur d'arrière-plan qui correspond mieux à la marque et au goût de leur site.
Dans ce guide, nous utiliserons Woostify, un thème fantastique pour les sites de commerce électronique. Selon votre thème, la méthode peut légèrement différer.
- Depuis le tableau de bord WordPress, accédez à Apparence > Fond d'écran/ Arrière-plan ou Apparence > Personnaliser > Fond d'écran .
- Cliquez sur le bouton Sélectionner une image pour ouvrir la médiathèque.
- Choisissez l'image souhaitée. Vous pouvez le télécharger depuis votre ordinateur ou en sélectionner un existant dans la médiathèque.
- Cliquez sur le bouton Choisir une image lorsque vous êtes satisfait.
- Si vous aimez ce que vous voyez sur l'aperçu, cliquez sur le bouton Publier . Et c'est tout !
De plus, WordPress propose un simple outil d'édition d'image d'arrière-plan. Vous pouvez l'expérimenter pour voir quelle taille, position, etc. est la meilleure.
Ne vous inquiétez pas de rester coincé avec quoi que ce soit. Il est facile de revenir aux paramètres et de modifier l'arrière-plan (et les options associées) à tout moment.
Utilisez le constructeur de pages Elementor pour ajouter des images d'arrière-plan WordPress à une publication/page
Elementor est un constructeur de pages répandu qui accélère considérablement la production de sites Web. Il propose un plugin gratuit que vous pouvez utiliser pour ajouter des images d'arrière-plan WordPress.
- Pour commencer, vous devez installer et activer le plugin Elementor.
- Tout d'abord, rendez-vous sur la publication ou la page de votre choix. Une fois sur l'éditeur de page WordPress par défaut, cliquez sur le bouton Modifier avec Elementor .
L'éditeur Elementor s'ouvrira. Sur le côté gauche, vous verrez un menu qui répertorie tous les blocs de glisser-déposer pour créer et modifier votre publication/page.
- Cliquez sur la petite icône de paramètres dans le coin inférieur gauche du constructeur de page.
- Ensuite, choisissez l'onglet Style .
- Après cela, cliquez sur l'icône du pinceau pour ajouter une image de fond WordPress .
- Ensuite, cliquez sur le bouton Choisir une image pour faire apparaître la médiathèque.
- Choisissez l'image souhaitée. Vous pouvez le télécharger depuis votre ordinateur ou en sélectionner un existant dans la médiathèque.
- Ensuite, cliquez sur le bouton "Insérer un média" dans le coin inférieur droit.
Maintenant, l'image d'arrière-plan sélectionnée devrait apparaître dans l'aperçu à droite. Vous devrez peut-être ajuster d'autres contenus pour vous assurer que des éléments tels que des images et du texte s'affichent correctement.
- N'oubliez pas d'appuyer sur le bouton "MISE À JOUR" pour enregistrer toutes les modifications et mettre à jour la publication/la page.
De plus, Elementor fournit quelques ajustements pour les images d'arrière-plan WordPress telles que la position, la pièce jointe, la répétition, etc. N'hésitez pas à les expérimenter pour trouver le meilleur arrière-plan.
Utiliser un plugin pour ajouter des images d'arrière-plan WordPress
Il existe plusieurs plugins gratuits mais excellents qui peuvent faire le travail d'ajout d' images d'arrière-plan WordPress . Par exemple, une image d'arrière-plan simple en plein écran, des arrière-plans WordPress avancés, un gestionnaire d'arrière-plan complet, etc.
Ajouter une image de fond WordPress pour l'ensemble du site
Dans ce guide, nous utiliserons l'image d'arrière-plan simple plein écran car elle est simple, d'où son nom.
Ce plugin permet une installation et une configuration simples d'une image d'arrière-plan WordPress pour votre site Web. Il redimensionne automatiquement l'image avec le navigateur. Ainsi, il remplit toujours l'écran, quels que soient les appareils utilisés par vos visiteurs.
Pour le mettre en action, il suffit de quelques étapes simples. Il existe une version payante disponible qui ajoute des fonctionnalités supplémentaires. Cependant, le gratuit est tout ce dont nous avons besoin.
- Installez et activez le plug-in Simple Screen Background Image.
- Depuis le tableau de bord WordPress, accédez à Apparence > Image BG plein écran .
- Cliquez sur le bouton Choisir une image pour ouvrir la médiathèque.
- Choisissez l'image souhaitée. Vous pouvez le télécharger depuis votre ordinateur ou en sélectionner un existant dans la médiathèque.
- Cliquez sur le bouton Choisir une image lorsque vous êtes satisfait.
- Enfin, cliquez sur le bouton "Enregistrer les options" et consultez votre site Web. L'image devrait maintenant s'afficher sur le site en tant qu'image d'arrière-plan WordPress plein écran.
Notez que le paramètre du plugin pour les images d'arrière-plan WordPress remplace le personnalisateur WordPress par défaut. Ce n'est pas une mauvaise chose d'aucune sorte, juste quelque chose à garder à l'esprit.
Ajouter des images d'arrière-plan WordPress sur une page / publication spécifique
Dans ce guide, nous utiliserons le plugin Advanced WordPress Backgrounds que nous avons mentionné ci-dessus.

Ce plugin permet d'ajouter des arrière-plans à l'aide de blocs Gutenberg. Vous pouvez définir une couleur, une image ou même une vidéo comme arrière-plan WordPress. Ils sont tous visibles sur les appareils mobiles. De plus, vous pouvez ajouter un effet de parallaxe aux images d'arrière-plan et aux vidéos WordPress.
Dans ce cas, nous n'ajouterons qu'une image d'arrière-plan statique à la zone de contenu, en particulier les publications/pages.
Comme cela fonctionne avec les blocs Gutenberg, assurez-vous de passer du mode Éditeur classique si nécessaire.
- Installez et activez le plugin.
- Ouvrez une publication/page existante ou créez-en une nouvelle.
- Cliquez sur le bouton plus dans le coin supérieur gauche. Ensuite, faites défiler jusqu'à la section Conception et choisissez le bloc AWB. Une barre d'icônes supérieure et une colonne de menu latérale apparaîtront à côté du bloc.
- Cliquez sur le bouton Image dans la colonne latérale. Cliquez ensuite sur le bouton Sélectionner une image en dessous pour ouvrir la médiathèque.
- Choisissez l'image souhaitée. Ensuite, cliquez sur le bouton Sélectionner . Une fois que vous avez fait cela, vous devriez voir l'image de fond.
- Dans la barre d'icônes supérieure, cliquez sur l'icône en forme de hamburger. Ensuite, choisissez l'option Pleine largeur pour couvrir toute la largeur. Ceci est entièrement facultatif.
Dans la colonne latérale, vous pouvez modifier la taille, l'espacement, la position de l'image d'arrière-plan WordPress, etc. N'hésitez pas à l'expérimenter.
Maintenant, il ne reste plus qu'à ajouter du contenu à l'intérieur du bloc. Si vous modifiez une publication/page existante, il vous suffit de couper et coller le contenu dans le bloc.
N'oubliez pas de sauvegarder la publication/la page lorsque vous êtes satisfait du résultat.
Utilisez CSS pour ajouter des images d'arrière-plan WordPress
Nous allons maintenant explorer comment modifier les images d'arrière-plan de WordPress à l'aide de CSS . Cela peut être fait pour l'ensemble du site ou pour des catégories spécifiques à l'aide de WordPress Customizer.
- Depuis le tableau de bord WordPress, accédez à Apparence > Personnaliser pour accéder au WordPress Customizer.
- Faites défiler vers le bas et cliquez sur la section CSS supplémentaire .
- Copiez et collez le code approprié ci-dessous dans le champ CSS :
Ajouter une image de fond WordPress pour l'ensemble du site
body { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }
Assurez-vous de remplacer le texte d'espace réservé "imageURL" par l'URL réelle du fichier image. Pour voir cela, sélectionnez l'image souhaitée dans la médiathèque pour afficher les informations sur l'image.
Et si vous connaissez le CSS, n'hésitez pas à le modifier comme bon vous semble.
Ajouter des images d'arrière-plan WordPress sur une page de catégorie spécifique
body.category-categoryid { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }
Assurez-vous de remplacer le texte d'espace réservé 'imageURL' par l'URL réelle du fichier image et 'categoryid' par le nom de catégorie approprié.
Pour connaître l'ID de catégorie, suivez les instructions ci-dessous :
- Depuis le tableau de bord WordPress, accédez à Articles > Catégories .
- Passez la souris sur le texte Modifier de la catégorie que vous souhaitez référencer. Vous verrez l'URL en bas à gauche de la page, indiquant l'ID de la catégorie.
Meilleures pratiques pour utiliser des images d'arrière-plan dans WordPress
Définir une image d'arrière-plan personnalisée sur WordPress semble être une tâche facile. Oui! C'est vrai dans la plupart des cas, mais pas toujours.
Par conséquent, nous vous recommandons de suivre les meilleures pratiques d'image d'arrière-plan WordPress pour éliminer autant de problèmes que possible.
Vérifier la prise en charge de l'image d'arrière-plan avant d'utiliser un thème WordPress
Malheureusement, tous les thèmes WordPress ne prennent pas en charge les images d'arrière-plan personnalisées. C'est généralement parce que les arrière-plans ne correspondent pas à la conception générale du thème. Par conséquent, les développeurs ont choisi de le désactiver complètement.
Par conséquent, vous devriez vérifier la liste des fonctionnalités lors du téléchargement d'un nouveau thème, surtout si vous prévoyez de payer pour un thème premium. De nombreux sites Web qui vendent des thèmes fournissent des informations indiquant si un thème WordPress prend en charge ou non les images d'arrière-plan.
Restez avec des images de haute qualité
La résolution de vos images d'arrière-plan prévues fait ou défait souvent sa présentation. Vous pourriez penser qu'une photo que vous avez prise avec votre téléphone est assez bonne pour un arrière-plan. Mais il y a de fortes chances qu'il doive être de bien meilleure qualité.
Vous pouvez payer pour des photos libres de droits sur des sites comme Shutterstock. Ces sites ont souvent des images de qualité professionnelle prêtes à être téléchargées en tant que grandes images d'arrière-plan. Vous pouvez également en trouver beaucoup sur des sites d'images gratuites.
L'image d'arrière-plan peut ne pas être entièrement visible sur votre site WordPress, car la majeure partie est couverte par le contenu. Cependant, il est toujours affiché sur tout l'écran. Par conséquent, vous courez le risque de voir un arrière-plan étiré si vous n'utilisez pas une image de haute qualité.
Optimiser les images d'arrière-plan
Comme pour toutes les photos téléchargées sur votre site WordPress, vous devez optimiser les images d'arrière-plan avant de les publier.
Ceci est particulièrement important pour les images d'arrière-plan, car elles apparaissent souvent sur plusieurs pages de votre site. De plus, ce sont de grandes photos qui occupent beaucoup d'espace sur l'écran. De plus, des images plus grandes sollicitent considérablement le serveur. Pensez donc à optimiser vos images de fond pour que votre site se charge rapidement.
Vous avez ici deux options :
- Optimisez les images d'arrière-plan (et toutes les photos de votre site Web) avant de les télécharger sur le serveur. Vous pouvez compléter ce processus manuel à l'aide d'outils tels que Photoshop, GIMP et Pixlr.
- Automatisez le processus d'optimisation en installant un plugin WordPress qui redimensionne et réduit les images lors du téléchargement.
Dernières pensées
L'ajout d'images d'arrière-plan WordPress à votre site Web peut sembler une petite chose. Mais si c'est bien fait, cela peut avoir un impact énorme.
De plus, cela peut aider à garder votre présence en ligne fraîche. Par conséquent, vos visiteurs ne s'ennuient pas en voyant les mêmes photos encore et encore.
Idéalement, utilisez WordPress Customizer pour ajouter une image d'arrière-plan chaque fois que possible, car il est spécifiquement conçu pour fonctionner comme prévu.
Cependant, vous avez également d'autres options pour ajouter et modifier les images d'arrière-plan WordPress, comme nous l'avons montré ci-dessus.
Maintenant, allez-y et faites preuve de créativité avec l'arrière-plan de votre site Web pour engager visuellement vos visiteurs.