Comment mettre une Image de Fond sur Shopify

Nous allons voir dans ce tutoriel comment mettre une image de fond ou un background image sur le fond d’une boutique Shopify. On verra également comment mettre ce type d’image sur une section ou une zone de votre site.

Mettre votre image sur Shopify

Rendez-vous dans l’administration de votre boutique – Paramètres – Fichier et déposez votre image – Copiez maintenant l’url de l’image et stocker la dans un éditeur de texte. Nous en aurons besoin tout à l’heure 😉

Positionner votre background image

Rendez-vous dans Boutique en ligne – Actions – Modifier le code et ouvrez le dossier Assets – trouvez votre fichier xxx.scss.liquid ou xxx.css.liquid, souvent appelé theme, style ou timber.

Mettez-vous tout en bas du site et copiez/collez le code suivant en remplaçant la portion « url-image » par l’url copiée tout à l’heure.

Sur tout le site

body {  
  background-image: url("url-image"); 
  background-size: 100%;
  background-repeat:no-repeat;
  background-position:center center;
}

Sur une section de la page d’accueil

#shopify-section-identifiant {  
  background-image: url("url-image"); 
  background-size: 100%;
  background-repeat:no-repeat;
  background-position:center center;
}

Regardez la vidéo pour savoir comment trouver l’identifiant de la section

Plus d’options ?

Je vous invite à visionner la vidéo 🙂

Ce tutoriel existe aussi en vidéo

a vidéo arrive bientôt 😉

Bon tuto à toutes et tous

Inclus dans Speedfly
Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 1 votes]

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 6 commentaires

  1. Abdoulaye Sembene

    26 Jan 2021 Répondre

    Salut dev j’espere que vous allez bien est-ce que ça marche avec le thème Fastlane?

    1. Dgeo Dev

      26 Jan 2021 Répondre

      Hello, théoriquement oui 🙂

  2. Magali

    4 Mar 2021 Répondre

    Bonjour,
    Sur le thème Brooklyn, est-il possible de mettre un fond de couleur mais que sur certaines parties ?
    Merci d’avance, impossible de trouver une réponse !

    1. Dgeo Dev

      5 Mar 2021 Répondre

      Bonjour, oui c’est possible mais il faut s’y connaitre en CSS et jouer avec les ID

  3. Pauline

    12 Avr 2021 Répondre

    Bonjour,

    Je travaille sur le thème Debut, pourriez-vous me dire comment ajouter un background sur une page uniquement ?
    J’aimerai l’ajouter sur ma page  » à propos  »

    Merci beaucoup

    1. Dgeo Dev

      13 Avr 2021 Répondre

      Bonjour, c’est un peu délicat, cela demande une mini intervention par un dev.

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine