Voulez-vous ajouter une image d’arrière-plan à votre site WordPress?
Les images d’arrière-plan peuvent être utilisées pour rendre votre site Web plus attrayant et plus esthétique.
Dans cet article, nous allons vous montrer comment ajouter facilement une image d’arrière-plan à votre site WordPress.
Didacticiel vidéo
Si vous préférez des instructions écrites, continuez à lire.
Méthode 1. Ajouter une image d’arrière-plan à l’aide des paramètres de votre thème WordPress
Les thèmes WordPress les plus populaires sont fournis avec un support d’arrière-plan personnalisé. Cette fonctionnalité vous permet de définir facilement une image d’arrière-plan sur votre site WordPress.
Si votre thème prend en charge la fonction d’arrière-plan personnalisé, nous vous recommandons d’utiliser cette méthode pour ajouter une image d’arrière-plan à votre site WordPress.
Cependant, si votre thème ne prend pas en charge cette fonctionnalité ou si vous n’aimez pas la façon dont il implémente les images d’arrière-plan, vous pouvez essayer les autres options mentionnées dans notre didacticiel.
Vous devez d’abord visiter le Apparence »Personnaliser page dans votre administrateur WordPress. Cela lancera le personnalisateur de thème WordPress où vous pourrez modifier différents paramètres de thème tout en affichant un aperçu en direct de votre site Web.
Ensuite, vous devez cliquer sur l’option «Image d’arrière-plan». Le panneau glissera et vous montrera les options pour télécharger ou sélectionner une image d’arrière-plan pour votre site Web.
Cliquez sur le bouton de sélection d’image pour continuer.
Cela fera apparaître le pop-up de téléchargement de médias WordPress où vous pouvez télécharger une image depuis votre ordinateur. Vous pouvez également sélectionner une image précédemment téléchargée dans la médiathèque.
Ensuite, vous devez cliquer sur le bouton Choisir une image après avoir téléchargé ou sélectionné l’image que vous souhaitez utiliser comme arrière-plan.
Cela fermera la fenêtre contextuelle de téléchargement multimédia et vous verrez l’aperçu de l’image sélectionnée dans le personnalisateur de thème.
Sous l’image, vous pourrez également voir les options de l’image d’arrière-plan. Sous «Préréglage», vous pouvez sélectionner la façon dont vous souhaitez que l’image d’arrière-plan soit affichée: écran de remplissage, ajustement de l’écran, répétition ou personnalisé.
Vous pouvez également sélectionner la position de l’image d’arrière-plan en cliquant sur les flèches ci-dessous. Cliquer sur le centre alignera l’image au centre de l’écran.
N’oubliez pas de cliquer sur le bouton «Enregistrer et 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-y et visitez votre site Web pour le voir en action.
Méthode 2. Ajouter une image d’arrière-plan personnalisée dans WordPress à l’aide d’un plug-in
Cette méthode est beaucoup plus flexible. Il fonctionne avec n’importe quel thème WordPress et vous permet de définir plusieurs images d’arrière-plan.
Vous pouvez également définir différents arrière-plans pour n’importe quel article, page, catégorie ou toute autre section de votre site WordPress.
Il rend automatiquement toutes vos images d’arrière-plan en plein écran et adaptées aux mobiles. Cela signifie que votre image d’arrière-plan se redimensionnera automatiquement sur les appareils plus petits.
Tout d’abord, vous devez installer et activer le plugin Full Screen Background Pro. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
Lors de l’activation, vous devez visiter Apparence »Image BG plein écran pour configurer les paramètres du plugin.
Il vous sera demandé d’ajouter votre clé de licence. Vous pouvez obtenir ces informations à partir de l’e-mail que vous avez reçu après l’achat du plugin ou de votre compte sur le site Web du plugin.
Ensuite, vous devez cliquer sur le bouton «Enregistrer les paramètres» pour enregistrer vos modifications. Vous êtes maintenant prêt à commencer à ajouter des images d’arrière-plan à votre site WordPress.
Allez-y et cliquez sur le bouton « Ajouter une nouvelle image » sur la page des paramètres du plugin. Cela vous mènera à l’écran de téléchargement de l’image d’arrière-plan.
Cliquez sur le bouton «Choisir une image» pour télécharger ou sélectionner une image. Dès que vous sélectionnez l’image, vous pourrez voir un aperçu en direct de l’image sur votre écran.
Ensuite, vous devez fournir un nom pour cette image. Ce nom sera utilisé en interne, vous pouvez donc tout utiliser ici.
Enfin, vous devez sélectionner l’emplacement où vous souhaitez que cette image soit utilisée comme page d’arrière-plan.
Full Screen Background Pro vous permet de définir des images comme arrière-plan global, ou vous pouvez choisir parmi différentes sections de votre site Web comme les catégories, les archives, la page d’accueil ou de blog.
N’oubliez pas de cliquer sur le bouton Enregistrer l’image pour enregistrer votre image de fond.
Vous pouvez ajouter autant d’images que vous le souhaitez en visitant le Apparence »Image BG plein écran page.
Si vous définissez plus d’une image à utiliser globalement, le plugin commencera automatiquement à afficher les images d’arrière-plan sous forme de diaporama.
Vous pouvez régler le temps nécessaire à une image pour disparaître et le temps après lequel une nouvelle image d’arrière-plan commence à apparaître.
Le temps que vous entrez ici est en millisecondes. Si vous voulez qu’une image d’arrière-plan disparaisse après 20 secondes, vous devrez entrer 20000.
N’oubliez pas de cliquer sur le bouton Enregistrer les paramètres pour enregistrer vos modifications.
Images d’arrière-plan pour les articles, pages et catégories
Full Screen Background Pro vous permet également de définir des images d’arrière-plan pour des articles uniques, des pages, des catégories, des balises, etc.
Modifiez simplement le message / la page où vous souhaitez afficher une image d’arrière-plan différente. Sur l’écran de modification de l’article, vous remarquerez la nouvelle boîte « Image d’arrière-plan plein écran » sous l’éditeur de publication.
Pour utiliser une image d’arrière-plan pour une catégorie spécifique, vous devez visiter le Apparence »Image BG plein écran puis cliquez sur le bouton «Ajouter une nouvelle image».
Après avoir téléchargé votre image, vous pouvez sélectionner «Catégorie» comme contexte dans lequel vous souhaitez afficher l’image d’arrière-plan.
Entrez maintenant l’ID de catégorie ou le slug spécifique dans lequel vous souhaitez afficher l’image. Consultez notre guide sur la façon de trouver un identifiant de catégorie dans WordPress.
N’oubliez pas d’enregistrer votre image pour stocker vos paramètres.
Méthode 3. Ajouter des images 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 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. Une fois que vous avez fait cela, il est temps de commencer à personnaliser votre site Web.
Ouvrez maintenant votre page d’accueil dans votre navigateur. Vous verrez le lien «Personnaliser avec CS SHero» dans votre barre d’administration.
Après avoir cliqué sur ce lien, vous verrez les options CSS Hero s’ouvrir. Passez votre souris sur la zone à laquelle vous souhaitez ajouter une image.
Dans la capture d’écran ci-dessous, vous verrez .header-filter-gradient zone. Lorsque vous cliquez sur cette zone, vous pouvez ensuite choisir le lien d’arrière-plan dans la barre latérale gauche.
Le lien d’arrière-plan s’ouvrira. De là, vous pouvez cliquer sur «Image». Maintenant, vous pouvez choisir une image d’Unsplash ou de vos téléchargements pour créer votre arrière-plan.
Lorsque vous cliquez sur l’image souhaitée, vous verrez le bouton « Appliquer l’image ». Ensuite, vous pouvez choisir la taille de votre image. Nous avons choisi la grande version pour qu’elle s’étende sur la page.
Cliquez sur « Enregistrer et publier » en bas, et l’image d’arrière-plan est maintenant enregistrée pour votre site.
Méthode 4. Ajouter des images d’arrière-plan personnalisées n’importe où dans WordPress à l’aide du 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 articles, catégories, auteurs et autres pages individuelles à l’aide de 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 lorsque quelqu’un consulte la page de 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 à la balise body.
Vous pouvez utiliser soit category-tv ou category-4 Classe CSS 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 votre propre catégorie.
Vous pouvez également ajouter des arrière-plans personnalisés à des articles et des pages individuels. WordPress ajoute 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 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 dans WordPress. Vous voudrez peut-être également voir notre comparaison des meilleurs plugins de création de pages par glisser-déposer pour WordPress, et notre tutoriel sur la création d’un thème WordPress personnalisé (sans aucun code).
Si vous avez aimé cet article, veuillez vous abonner à notre Chaîne Youtube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Le message Comment ajouter une image d’arrière-plan dans WordPress est apparu en premier sur WPBeginner.
