Vous vous demandez comment ajouter une image d’arrière-plan à votre site Web WordPress?
Les images d’arrière-plan peuvent être utilisées sur toute une série de sites web différents pour les rendre plus attrayants et améliorer la conception de votre site.
Nous allons vous expliquer, étape par étape, comment ajouter facilement une image d’arrière-plan à votre site WordPress.
Table des matières
1. Ajouter une image d'arrière-plan via les paramètres du thème WordPress
La plupart des thèmes WordPress offrent un support pour les arrière-plans personnalisés. Cela signifie que vous pouvez facilement changer l’image d’arrière-plan de votre site WordPress.
C’est probablement la façon la plus simple d’ajouter un arrière-plan, donc si votre thème WordPress le prend en charge, vous pouvez continuer avec cette méthode.
Si votre thème ne propose pas cette fonctionnalité, nous vous proposons de nombreuses autres méthodes ci-dessous.
Naviguez vers Apparence > Personnaliser dans votre tableau de bord d’administration de WordPress. Vous accédez ainsi au personnalisateur de thème de WordPress. Vous pouvez y modifier les paramètres de votre thème avec un aperçu en direct pour voir les modifications apportées à votre site Web.
Sous l’onglet Couleurs et arrière-plans , vous verrez des options permettant de sélectionner l’image d’arrière-plan, ou de modifier la couleur et le motif de l’arrière-plan. Localisez le bouton“Sélectionner une image” et cliquez dessus.
Vous verrez maintenant votre bibliothèque de médias WordPress où vous pouvez télécharger une image depuis votre ordinateur, ou sélectionner une image dans votre bibliothèque de médias pour l’appliquer comme image de fond sur votre site Web WordPress.
Cliquez sur l’image que vous souhaitez définir comme image d’arrière-plan et appuyez sur “Choisir une image” pour continuer. La bibliothèque multimédia se ferme alors et l’image sélectionnée s’affiche dans la section d’aperçu du personnalisateur du thème.
Vous pouvez personnaliser davantage votre image de fond en sélectionnant“Options“. Ici, vous avez la possibilité de positionner votre image, de la répéter (si elle n’est pas assez grande), et plus encore.
2. Utiliser un plugin pour personnaliser l'image d'arrière-plan dans WordPress
Si votre thème ne vous permet pas de personnaliser l’image d’arrière-plan via le personnalisateur de thème, vous pouvez utiliser un plugin qui fonctionne avec tous les thèmes.
Le plugin Full Screen Background Pro vous permet de définir des arrière-plans pour tout article, page ou toute autre partie de votre site Web WordPress.
Toutes les images seront automatiquement mises en plein écran et adaptées aux téléphones portables, ce qui est très difficile à réaliser avec le personnalisateur du thème.
Tout d’abord, installez le plugin Full Screen Background Pro. Une fois qu’il est installé, activez le plugin.
Naviguez vers Apparence > Full Screen BG Image où vous pouvez configurer les paramètres du plugin.
Ce plugin est un plugin premium, et n’est donc pas gratuit. Lorsque vous naviguez vers l’emplacement ci-dessus, il peut vous être demandé de saisir votre clé de licence. Vous trouverez cette information dans l’e-mail que vous avez reçu après avoir acheté le plugin.
Cliquez sur“Enregistrer les paramètres” pour sauvegarder vos modifications. Vous êtes maintenant prêt à commencer à ajouter des images de fond à vos pages, articles et catégories WordPress.
Sélectionnez “Ajouter une image” sur la page des paramètres du plugin. Comme nous l’avons fait dans la première méthode, sélectionnez ” Choisir une image ” pour lancer la bibliothèque multimédia de WordPress.
Vous devrez ajouter un nom d’image, mais celui-ci ne sera affiché que dans le backend de WordPress, alors donnez-lui un nom en rapport avec l’image.
Choisissez l’endroit où vous voulez que l’image soit affichée :
- Global
- Catégorie
- Archives
- Pages
- Postes
- Blog
- Première page
- Recherche
- 404
- Connexion
3. Ajouter une image d'arrière-plan via CSS Hero
CSS Hero est un plugin WordPress qui permet de modifier le thème de votre site Web WordPress sans aucun codage.
Il s’agit d’une option parfaite pour les débutants qui veulent plus de flexibilité que ce qu’offre le personnalisateur de thème, mais qui ne sont peut-être pas préparés à d’autres méthodes plus compliquées.
Installez et activez CSS Hero, puis naviguez vers votre page d’accueil dans votre brwoser internet. En haut, vous verrez l’option“Personnaliser avec CSS Hero” ; cliquez sur ce lien dans votre barre d’administration.
CSS Hero est un plugin premium, avec des forfaits à partir de 19 $ par an. Si vous ne personnalisez qu’un seul site, vous pouvez choisir l’option Starter.
Une fois que vous avez cliqué sur le bouton dans la barre d’administration, vous obtenez les options CSS Hero. Passez votre souris sur la zone sur laquelle vous souhaitez modifier l’image d’arrière-plan.
Choisissez le lien d’arrière-plan dans la barre latérale gauche, puis sélectionnez “Image”. Vous pouvez télécharger vos propres images ou en choisir une sur Unsplash, qui est un site de photos de stock gratuit.
Lorsque vous avez obtenu l’image que vous souhaitez ajouter comme image de fond à votre site Web WordPress, sélectionnez “Appliquer l’image”. Vous pouvez ajuster la taille de votre image et plus encore via les options.
Si vous êtes prêt à voir votre nouvelle image d’arrière-plan en action, cliquez sur “Enregistrer et publier”. CSS Hero fonctionne avec une variété d’autres plugins comme Elementor, alors assurez-vous de vérifier sa compatibilité avant de l’acheter.
4. Ajouter une image d'arrière-plan à l'aide de CSS
WordPress, par défaut, ajoute des classes CSS aux différents éléments de votre site WordPress. Si vous êtes prêt à expérimenter le code CSS, cette méthode est peut-être la meilleure pour vous.
Si vous avez une catégorie sur votre site WordPress appelée “Critiques”, les classes CSS seront automatiquement ajoutées lorsque la page de cette catégorie sera consultée.
Naviguez vers une page de catégorie, cliquez sur le bouton droit de votre souris, puis sélectionnez “Inspecter”. Vous pourrez voir les classes CSS qui ont été ajoutées par WordPress.
Dans cet exemple, vous pouvez utiliser laclasse CSS category-reviews pour donner à cette catégorie un style différent de celui des autres catégories de votre site WordPress.
Ajoutez le CSS personnalisé suivant à votre thème, en n’oubliant pas de remplacer la catégorie et l’image d’arrière-plan selon vos besoins.
|
1
2
3
4
5
6
7
|
body.category-reviews { background-image: url("http://example.com/wp-content/uploads/2019/03/your-background-image.jpg"); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;} |
5. Roundup
Nous espérons que cet article vous a été utile pour vous apprendre à ajouter une image d’arrière-plan dans WordPress. Pour plus de tutoriels WordPress, visitez notre page de blog et utilisez la fonction de recherche pour trouver d’autres guides WordPress !
