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 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 8 commentaires

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

    1. Hello, théoriquement oui 🙂

  2. 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. Bonjour, oui c’est possible mais il faut s’y connaitre en CSS et jouer avec les ID

  3. 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. Bonjour, c’est un peu délicat, cela demande une mini intervention par un dev.

  4. 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. Hello, difficile à dire, cela dépend des thèmes. Sur speedfly c’est inclus au besoin 😉

Laisser un commentaire

Fermer le menu