Comment ajouter une image de fond dans WordPress

Voulez-vous ajouter une image de fond à votre site WordPress? Les images de fond peuvent être utilisées pour rendre votre site Web plus attrayant et esthétiquement agréable. Dans cet article, nous allons vous montrer comment ajouter facilement une image d’arrière-plan à votre site WordPress..

Didacticiel vidéo

Si vous n'aimez pas la vidéo ou si vous avez besoin de plus d'instructions, continuez à lire..

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

La plupart des thèmes WordPress gratuits et premium sont accompagnés d’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 fonctionnalité d'arrière-plan personnalisé, nous vous recommandons d'utiliser cette méthode pour ajouter une image d'arrière-plan à votre site WordPress. Toutefois, si votre thème ne prend pas en charge la fonctionnalité d'arrière-plan personnalisée, vous pouvez utiliser d'autres méthodes dans cet article..

Vous devez d’abord visiter le Apparence »Personnaliser page dans votre admin WordPress. Cela lancera le personnalisateur de thème WordPress dans lequel 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 de fond". Le panneau s’introduira 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 la popup WordPress Media Uploader où vous pouvez télécharger une image à partir de votre ordinateur. Vous pouvez également sélectionner une image précédemment téléchargée à partir de la médiathèque..

Ensuite, vous devez cliquer sur le bouton Choisir une image après avoir chargé ou sélectionné l’image que vous souhaitez utiliser comme arrière-plan..

Ceci fermera la fenêtre contextuelle de téléchargement de média et vous verrez l'aperçu de votre image sélectionnée dans le personnalisateur de thème..

En dessous de l'image, vous pourrez également voir les options de l'image d'arrière-plan. Sous préréglage, vous pouvez choisir le mode d’affichage de l’image d’arrière-plan: écran de remplissage, écran de lissage, répétition ou personnalisation..

Vous pouvez également sélectionner la position de l'image d'arrière-plan en cliquant sur les flèches ci-dessous. En cliquant 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 de fond à 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 plugin

Cette méthode est beaucoup plus flexible. Cela 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 tout article, page, catégorie ou toute autre section de votre site WordPress..

Il rend automatiquement toutes vos images de fond en plein écran et réactives pour les mobiles. Cela signifie que votre image d'arrière-plan se redimensionnera automatiquement sur de plus petits appareils..

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 pour installer un plugin WordPress..

Lors de l'activation, vous devez visiter Apparence »Image plein écran BG page pour configurer les paramètres du plugin.

Vous serez invité à ajouter votre clé de licence. Vous pouvez obtenir ces informations à partir du courrier électronique 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 à 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 d'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 à l'écran..

Ensuite, vous devez donner un nom à cette image. Ce nom sera utilisé en interne, vous pouvez donc utiliser n'importe quoi 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 globalement. Vous pouvez également choisir parmi différentes sections de votre site Web, telles que catégories, archives, page d'accueil, page de blog, etc..

N'oubliez pas de cliquer sur le bouton Enregistrer l'image pour enregistrer votre image d'arrière-plan..

Vous pouvez ajouter autant d'images que vous le souhaitez en visitant Apparence »Image plein écran BG page.

Si vous définissez plusieurs images à utiliser globalement, le plug-in commencera automatiquement à afficher les images d'arrière-plan sous forme de diaporama..

Vous pouvez ajuster le temps nécessaire pour qu'une image disparaisse 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 souhaitez qu'une image d'arrière-plan disparaisse au bout de 20 secondes, vous devez entrer 20000.

N'oubliez pas de cliquer sur le bouton Enregistrer les paramètres pour enregistrer vos modifications..

Définition de l'image de fond pour des articles, pages, catégories, etc. individuels

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 tags, etc..

Il suffit de modifier le message / la page sur laquelle vous souhaitez afficher une image d'arrière-plan différente. Sur l'écran de post-édition, vous remarquerez la nouvelle zone "Image d'arrière-plan plein écran" sous l'éditeur de post.

Pour utiliser une image de fond pour une catégorie spécifique, vous devez visiter Apparence »Image plein écran BG page 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..

Maintenant, entrez l'ID de catégorie spécifique ou le slug où vous souhaitez afficher l'image. Consultez notre guide sur la recherche d’ID de catégorie dans WordPress..

N'oubliez pas de sauvegarder votre image pour stocker vos paramètres.

Méthode 3: Ajouter des images d’arrière-plan personnalisées n’importe où dans WordPress avec 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, catégories, auteurs et autres pages individuels à 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 visionnera la page de catégorie TV..

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 catégorie-tv ou catégorie 4 Classe CSS pour styler simplement cette page de catégorie différemment.

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"); position de fond: centre centre; taille du fond: couverture; répétition de fond: non répétée; attachement de fond: fixe;  

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 publications et à des pages individuelles. WordPress ajoute une classe CSS avec l'identifiant de publication ou de page dans la balise body. Vous pouvez utiliser le même code CSS, il suffit de remplacer .category-tv par la classe CSS spécifique au post.

Nous espérons que cet article vous a appris à ajouter une image d’arrière-plan dans WordPress. Vous voudrez peut-être aussi voir notre liste d’astuces extrêmement utiles pour le fichier de fonctions WordPress.

Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Facebook.