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

25 Comments

  1. Willi

    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.

    • Team WebAcappella

      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.

  2. ADSL27

    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.

  3. Van de Moosdijk RIchard

    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

  4. testeur74

    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

    • Team WebAcappella

      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.

  5. bescou damien

    Bonjour et merci, en revanche la zone pour copier coller le script est bloqué. Impossible d’y écrire.

    • Team WebAcappella

      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.

      • suissa

        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

  6. marc frieder

    je ne comprend pas ou est le fichier scrip.html

    • Team WebAcappella

      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é 😉

  7. marc frieder

    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

    • infofcp

      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

      • Team WebAcappella

        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 🙂

  8. Elisabeth

    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

  9. Pierrot

    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.

    • Team WebAcappella

      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,

  10. Tony

    Ce n’est pas Responsive : (

    • Team WebAcappella

      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 🙂

  11. Elisabeth

    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.

  12. Christophe

    Bonjour,
    Est il possible d’insérer plusieurs images qui tourneraient en diaporama ?
    Merci

  13. BONNET

    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 ?

    • Team WebAcappella

      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.

Commentaires fermés