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 Ressources (Assets) – trouvez votre fichier base.css, theme.css, style.css ou autre fichier .css que votre thème utilise.

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]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

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

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 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 12 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.

  4. R

    13 Avr 2022 Répondre

    Bonjour comment mettre le background seulement sur la page d’accueil ? quel est l’id ou le # pour ciblé que la page d’accueil ?

    1. Dgeo Dev

      14 Avr 2022 Répondre

      Hello, difficile à dire, cela dépend des thèmes. Sur speedfly c’est inclus au besoin 😉

  5. Ngenda Michel

    24 Nov 2022 Répondre

    Bonjour,
    Es-ce qu’on peut rajouter quelque chose au code pour que l’image s’adapte sur les écrans de Gsm et Tablettes svp?
    Merci à vous,
    Michel

  6. kelly

    3 Mar 2023 Répondre

    bonjour ! merci pour chaque tuto que vous faite qui m’aide grandement ! en revanche avec le theme DAWN , j’ai exécuté à la lettre vos instructions en allant sur base.ccs et absolument rien de change , je n’arrive pas à avoir de arrière plan

  7. julien

    29 Sep 2024 Répondre

    Bonjour,
    Pareil que kelly, sur le theme DAWN ca ne fonctionne pas

Laisser un commentaire

Fermer le menu
×
×

Panier