Mettre une image de fond aux pages liées à "Tous nos produits"

aspifrance

aspifrance

Messages : 1
Inscrit le : 27/01/2009 00:00

Bonjour, la question a été posée mais je ne vois pas de réponse ...
Je voudrais mettre une photo ou image de fond sur mes pages (Centrales - Trousses - Flexibles etc ...)
Pouvez vous m'aider en me donnant un exemple de code html à mettre dans les css.

Merci pour vos réponses.
Dominique

thomas

thomas

Messages : 83
Inscrit le : jeudi, 20 septembre 2012

Bonjour,

Pour avoir une image de fond sur les pages produits :

1) Choisissez une image plutôt pâle si vous avez vos contenus en écriture noire/sombre, de format 4000x4000 par exemple
2) Comme l'image sera grande et probablement lourde, utilisez Tinypng pour optimiser son poids (utilisation gratuite)
3) Ajoutez l'image dans la partie Stockage > Gérer les images ou Stockage > Gérer les fichiers si l'image a des cotés supérieurs à 4032px
4) Récupérer l'URL de l'image
5) Ajoutez cette règle CSS dans Modules > Boutique > Réglages > Zones éditables, puis dans la zone à éditer : Produits de la boutique et en passant par l'éditeur HTML :

Collez d'abord l'URL de l'image avant de copier/coller ce code. L'URL de l'image pourra alors être coupée/collée pour l'intégrer dans la seconde ligne de ce code :

<style type="text/css">body{
background-image: url(Adresse de votre image);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
</style>


Dans la ligne background-image, remplacez Adresse de votre image par l'adresse de votre image.

Voici un exemple de rendu :
https://www.test-thomas.fr/boutique/autres/stylo.html

Image libre de droit :
https://pixabay.com/fr/photos/lumi%C3%A8re-ciel-ensoleill%C3%A9-nuages-1282314/

Edité le 23/10/2020 17:06 par thomas