Un arrière-plan fullscreen et responsive pour votre site
Un nouvel article aujourd’hui concocté par la team WebAcappella pour vous montrer comment doter votre site internet d’un arrière-plan qui soit à la fois fullscreen et responsive : fullscreen pour qu’il s’affiche sur toute la largeur de votre écran et responsive pour que son affichage s’adapte à la taille de l’écran sur lequel il est visionné… Au programme, vous allez mettre le nez dans votre serveur et vos mains dans du code… Alors, envie d’essayer ?
Étape 1 : le transfert FTP
Téléchargez et décompressez le dossier zip « supersized » contenant les fichiers sources à cette adresse : http://download.intuisphere.com/Blog/supersized.zip
Vous trouverez un dossier nommé « js » et contenant le script du plugin jquery « supersized ». Ouvrez votre outil de transfert FTP (Filezilla, Cyberduck, etc) et connectez-vous à votre hébergeur pour accéder ensuite au dossier où est publié votre site internet. À l’intérieur de ce dossier, glissez et déposez le dossier « js ». Pensez à actualiser le serveur pour que les derniers changements soient pris en compte.
À noter : si vous nommez votre dossier « js » original autrement, il vous faudra modifier par la suite le code d’intégration à insérer dans WebAcappella. Faites en sorte de donner à ce dossier un nom simple sans majuscules ni caractères spéciaux.
Étape 2 : votre image de fond
Dans le dossier « js », au même niveau que le fichier du script, déposez l’image qui sera utilisée comme arrière-plan pour votre site internet. Bien évidemment, faites en sorte d’avoir une image de grand format (2000 px de large par exemple) et que vous aurez pris soin d’intituler « fond.jpg ».
À noter : si vous nommez votre photo autrement, il vous faudra modifier par la suite le code d’intégration dans WebAcappella. Choisissez un nom simple à retenir en évitant les noms avec accents, caractères spéciaux, underscores, etc…
Étape 3 : intégration du code dans WebAcappella
Dernière étape, vous allez devoir coller le code du script dans votre site réalisé avec WebAcappella. Pour cela, dans les fichiers sources mis à votre disposition, ouvrez le fichier intitulé « script.html » :
- avec votre navigateur internet en affichant le code source
- ou avec votre éditeur de textes/code type Notepad ou Dreamweaver…
Pour que le fond s’applique à tout votre site, copiez et collez l’intégralité du code dans les « Réglages avancés » (la petite roue crantée) disponibles dans « Site »Propriétés du site web ».
À noter : le code débute avec la balise <script> et se finit avec </script>.
Si vous avez modifié le nom initial du dossier « js » et de votre image « fond.jpg », n’oubliez pas de modifier le code d’intégration aux lignes suivantes :
- <script type= « text/javascript » src= « js/supersized.js » ></script>
- slides : [ { image : ‘js/fond.jpg‘ } ]
La procédure d’intégration est terminée. Il ne vous reste plus qu’à voir le résultat en testant et publiant votre site internet ! 🙂 Et si vous voulez un exemple d’intégration réussie, nous vous invitons à visiter le site de Tuan, utilisateur WebAcappella et photographe professionnel : www.ngtuan.com
Excellent, mais j’attend avec impatience que chaque changement de page d’un site fais avec WebAcappella ne nécessite plus le rechargement du header, du footer et des add-on comme la photo de fond, car ça freine considérablement chaque changement de page pour le visiteur.
Bonjour Willi,
Merci pour votre commentaire et retour sur le plugin. Aujourd’hui, après plusieurs essais d’intégration, nous n’avons pas constaté de ralentissement d’affichage lié à l’utilisation de ce plugin extérieur à WebAcappella.
Bonjour.
Très bonne idée…manque simplement un lien (qui serait facultatif) lorsqu’on clique sur le fond (sur le background).
Bravo et merci.
Cordialement.
Bonjour,
L’astuce fonctionne mais l’image n’occupe pas toute la hauteur, même après avoir augmenté sa taille à 6000*4000. L’option « répétition » (h, v, ou h+v) serait le bienvenue peut-être..
Merci,
Richard
Bonjour,
J’ai essayé et les explications étant très bien faites j’ai obtenu un résultat.
Mais car il y a souvent un « mais » sur imac 27 pouces navigateur Safari l’image de fond est parfaite (elle est tronquée pour s’adapter à l’écran) sur le deuxième écran connecté au mac en 17 pouces c’est parfait. Par contre sur un PC 16 avec iE ou sur une tablette surface RT de microsoft la photo n’est pas tronquée mais compressée dans la largeur.
Sur PC avec Safari même image que sur Mac.
Faut-il ajouter une commande spéciale pour avoir une bonne image avec IE?
Merci
Bonjour Testeur74,
Le plugin est compatible nativement avec IE sans ajout de commande supplémentaire. Celui présenté dans cet article est une version allégée pour une intégration simple et rapide dans WebAcappella mais si besoin, vous pouvez aller visiter le site officiel du plugin Supersized à l’adresse http://buildinternet.com/project/supersized/core/3.2/core.html.
Bonjour et merci, en revanche la zone pour copier coller le script est bloqué. Impossible d’y écrire.
Bonjour Damien,
Le code à coller dans les « Propriétés du site web / Réglages avancés » est celui du fichier « script.html ». Si vous ne pouvez pas accéder à ces réglages avancés, vous devez alors avoir une version gratuite et limitée du logiciel WebAcappella.
bonjour
merci pour cette petite astuce et vivement l’intégration ! j’en profite aussi pour savoir quand est ce que pour le ecommerce on pourra régler comme bon nous semble la taille des vignettes produit et le placement du texte car je trouve les 6 modeles trop limité il en suffirait d’un ou on peut changer facilement la taille de la vignette et la ca serait vraiment le top du ecommerce
je ne comprend pas ou est le fichier scrip.html
Bonjour Marc,
Le fichier script.html est à récupérer dans le dossier zippé « supersized » disponible à l’adresse : http://download.intuisphere.com/Blog/supersized.zip.
Une fois le dossier décompressé, vous trouverez le fichier script.html qu’il vous faut ouvrir avec un éditeur de textes ou votre navigateur en affichant ensuite le code source.
En espérant que cette réponse vous aura aidé 😉
moi ca ne marche pas quelle taille dois avoir le fond. car quand je vais le tester sur iphone mon est plus petit mais pas le texte ou les autres images de plus le fond se met a gauche. Qui peut m aider
Oui j’ai le même problème sur iphone ce n’est pas centrée ?! par contre le site du photographe fonctionne et est bien affiché centré sur iphone ?! comment faire
Bonjour,
Lorsque vous avez créé votre site internet, avez-vous bien coché l’option « Plan de travail centré lors de la publication » dans les propriétés de votre page ou maquette ? Enfin, pour qu’un site soit bien adapté à la lecture sur smartphones, la largeur de votre page ne doit pas excédée 1000px.
La team WA 🙂
Avez un autre exemple de site webaccapela fullscreen et responsive, car celui que vous proposez en exemple (fort joli au demeurant) ne me parait pas « responsive » (je me trompe peut-être) car lorsque l’on réduit la page , il réagit comme un site WA classique : la page se déplace sur le fond, mais au bout d’un moment le texte est coupé et non pas réajusté sur une colonne. Merci
Bonjour Elisabeth,
Seul l’arrière plan du site, à savoir la photo, est responsive. Si vous souhaitez voir un autre site utilisant ce type de plugin, la team vous invite à aller visiter le site http://www.lapetitemaisondanslagalerie.com/.
Bonjour. J’ai suivis à la lettre le mode d’emploi, mais la photo ne s’affiche pas en arrière plan de mon site.
J’ai intégré le dossier JS dans www avec son script, soit /www/js. Ma photo à bien été renommée fond.jpg dans le dossier JS. Pour finir j’ai bien intégré le code dans réglages avancés.
Ou est le problème dans mon cas ?
Merci de votre réponse.
Bonjour Pierrot,
Pourriez-vous nous indiquer l’adresse du site internet où est installé le script pour vérifier le code collé dans vos réglages avancés ? Si vous suivez bien les instructions de l’article, vous devriez pouvoir arriver au résultat du site internet cité en exemple.
La team,
Ce n’est pas Responsive : (
Bonjour Tony,
C’est l’image d’arrière-plan qui est responsive. Si vous réduisez la taille de votre navigateur, la photo doit se recadrer automatiquement. Par contre, votre mise en page réalisée avec les composants WebAcappella reste inchangée et fixe.
Cordialement,
La team 🙂
Bonjour,
oui oui ça marche! j’avais un fond de rochers dont l’image se répétait au bout d’un moment. Et là elle s’adapte à la taille de l’écran sans se répéter (http://wwwshiatsu-finistere.com). Détail : J’avais renommé dans un 1er temps le dossier js (jsfdresponsivjmb) et ça n’a pas marché, le fond restait blanc. J’ai donc laissé « js » sans le renommer et ça a marché!
Merci beaucoup pour l’info.
Bonjour,
Est il possible d’insérer plusieurs images qui tourneraient en diaporama ?
Merci
Bonjour Christophe,
Le plugin supersized est disponible en plusieurs « versions » que vous trouverez sur le site officiel à l’adresse suivante : http://buildinternet.com/project/supersized/demo.html.
Bonne recherche à vous,
La team 🙂
Bonjour,
Je viens de tester l’astuce décrite ci-dessus cependant je m’aperçois que le fond d’écran est mobile et se déplace avec le scroll alors que sur le site donné en démonstration le fond de l’écran est figé, auriez-vous l’astuce nécessaire ?
Bonjour,
Tout dépend de la hauteur de votre page (propriétés de la page) et de la hauteur de votre image. À vous de tester la meilleure configuration 🙂 Dans l’exemple, l’utilisateur a mis un dégradé transparence/noir sur sa photo puis il a paramétré un fond de couleur noir en arrière-plan dans les propriétés de sa maquette d’où le fait que l’image soit fixe.