Comment insérer une image de fond de page adaptative

Un fond de page «pleine page»
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Wordpress 3.x
Revoir le teaser Je m'abonne
Transcription

59,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis

59,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont : apprendre à insérer une image de fond de page responsive, découvrir les fonctionnalités du plugin Simple Fullscreen Background Image, et comprendre comment gérer les images pour différentes saisons.

Découvrez comment insérer une image de fond de page qui s'adapte automatiquement à la taille de l'écran avec l'utilisation de CSS.

Insérer une image de fond de page permet de donner un aspect visuel attrayant à votre site web. En utilisant du code CSS, vous pouvez rendre cette image adaptative selon la largeur de l'écran des utilisateurs, évitant ainsi l'effet d'image répétée ou un fond de couleur uniforme sur les écrans larges.

Le plugin Simple Fullscreen Background Image simplifie cette tâche et offre la possibilité de changer les images selon les saisons, ce qui est idéal pour un site d'hôtel en montagne par exemple, pour afficher des images différentes en été et en hiver.

Une fois l'extension installée, vous pouvez sélectionner et remplacer facilement les images via le réglage 'Apparence > Fullscreen'. Veillez à choisir des images de taille appropriée pour ne pas ralentir le chargement de vos pages. Ce plugin, simple à utiliser, propose également d'autres fonctionnalités avancées comme les diaporamas de fond de page.

Voir plus
Questions réponses
Quelle est l'avantage principal d'utiliser le plugin Simple Fullscreen Background Image?
Le principal avantage est la simplicité d'utilisation pour insérer une image de fond de page responsive et la capacité de changer d'image facilement.
Pourquoi est-il important de choisir des images de taille appropriée?
Il est important de choisir des images de taille appropriée pour éviter d'alourdir la vitesse de chargement des pages, ce qui peut affecter l'expérience utilisateur et le référencement.
Quelles sont les fonctionnalités supplémentaires des plugins plus complexes?
Les plugins plus complexes permettent d'avoir des diaporamas d'images, d'alterner les images en fonction des pages, ou de faire en sorte que le visiteur ne voit jamais la même image.
Nous allons voir maintenant comment insérer une image de fond de page. Ce qui est intéressant avec l'utilisation de code CSS, c'est que l'on peut avoir une image qui s'adapte automatiquement à la largeur de l'écran de la personne qui visualise votre site. Ça veut dire que quelqu'un qui a un écran très large ne va pas avoir un fond de couleur fade ou d'avoir une image répétée. Il va pouvoir avoir une occupation de plein espace avec une image que l'on va sélectionner. Et pour vous, ça va vous permettre d'avoir une image que vous allez pouvoir gérer facilement et que vous allez pouvoir adapter en fonction des saisons. Par exemple, si vous avez un site pour un hôtel à la montagne, vous allez pouvoir été et hiver mettre des images qui sont adaptées à la saison. Donc pour ça, on va utiliser le plugin Simple Fullscreen Background Image. Je l'ai sélectionné parce qu'il est simple. Vous allez trouver aussi des plugins plus complexes pour, par exemple, avoir des diaporamas d'images en fond de page ou d'alterner les images en fonction des pages ou de faire en sorte que le visiteur ne voit jamais la même. Donc il y a énormément de possibilités. Voyons le Simple Fullscreen. Donc j'ai installé l'extension Simple Fullscreen Background et je vais l'utiliser. On retrouve les réglages dans Apparence Fullscreen. Je sélectionne une image. Donc c'est ici qu'on va la sélectionner. C'est ici que vous pourrez la remplacer. Je vais choisir une image que j'ai préparée. Donc il faut faire attention parce que ces images, elles sont assez larges et donc elles peuvent facilement alourdir la vitesse de chargement de vos pages. Très bien, j'ai mon image. Donc ici, je sélectionne bien la taille originale. Et là, je fais insérer dans l'article. Je ne l'insère pas dans l'article, mais je l'insère dans mon apparence de fond. Mon image apparaît ici. Très bien. Et j'enregistre. Maintenant, si je retourne sur ma page et que j'actualise, vous voyez le fond d'écran, c'est l'image que je viens d'envoyer. Et si je réduis la taille de mon affichage pour bien afficher le fond, regardez, ça s'adapte bien en fond. Et surtout, même si je redimensionne. Voilà un beau fond d'écran.

Programme détaillé de la formation

Nos dernières formations WordPress