[RESOLU] Comment mettre une image en fond d'ecran de la boutique

[Wormholesurfer]

Bonjour a tous, pardonnez moi si la question a ete poser ( et je pense qu'elle l'as ete mais je n'ai pas trouve en faisant l'outil de recherche toute les reponses sont an anglais...)

 

Je souhaiterai mettre une image de fond a ma boutique et aimerai connaitre la resolution de celle ci pour qu'elle remplisse tout le fond .

 

Merci bcp par avance

[Jacques Biais]

Bonjour,

Pour mettre une image de fond il faut l'appeler avec le css:

Body {

background-image: url('../img/TONIMAGE.jpg');

 

 

Ensuite si cette image doit être répétée il faudra ajouter un background-repeat: etc etc.

 

Une simple recherche avec google t'apportera des exemples détaillés..

Les résolutions d'écran sont variables et d'après: http://www.w3schools.com/ 85% des visiteurs utilisent une résolution d'écran supérieure à 1024x768Px, cela te donne déjà une base mais sachant qu'une page Prestashop fait 980px, il ne restera pas grand chose de visible dans cette résolution.

Sachant qu'il existe des résolutions de 1920x1200px, tu peux te baser sur cela, elle sera visible en totalité pour de grandes résolutions, tronquée pour des dimensions inférieures voire invisible pour des dimensions de 800x600pixels.

 

Il n'y a pas de règles générales, par ailleurs il faut être prudent car une image de grande résolution sera gourmande en ressource et ralentira le chargement de la page.

L'idéal est de faire une image de fond de 1 à 10px de large selon le motif et d'utiliser ensuite la propriété background-repeat afin qu'elle garnisse convenablement la page.

Cordialement.

[Wormholesurfer]

Bonjour merci bcp de ta reponse.

 

Cependant je ne sais pas où inclure cette ligne de code ?

 

dsl ...

 

Merci bcp

[Jacques Biais]

Dans le global.css =====> balise "body"

[Wormholesurfer]

merci bcp je vais essayer

[Wormholesurfer]

je viens d'esayer de faire un essai mais cela ne marche pas ...

voici ce que g fait :

 

J'ai ete deans le repertoire :

 

www/shop/themes/"montheme"/css/ pour ouvrir et editer ma global CSS

 

je croi avoir trouver la ligne gerant le body :

 

"body {

background-color: white;

font-size: 11px;

font-family: Verdana, Arial, Helvetica, Sans-Serif;

color: #5d717e;

text-align: center

background-image:http://www.planete-trucages.com/images/images_wallpapers/wallpaper00000002.jpg;

}"

 

J'ai volontairement mis une image trouver sur le web et heberger sur le web pour faire mon essai est ce pour cela que ça ne marche pas ? il faut que l'image soi stocke a la racine du site dans le rep image ?

 

g vider le smarty du site et le cache de mon navigateur avant de relancer mon site bien sur ...

 

dernier edit: je viens de reessayer en mettant une image dans le rep img de mon site et en changeant l'adresse mais cela ne marche tjrs pas ...

[Stéphane Chonez]

tu as fais une erreur de syntaxe pour background-image :

 

background-image: url('http://www.planete-trucages.com/images/images_wallpapers/wallpaper00000002.jpg');

 

ce code devrait fonctionner mais moi je synthétiserai par

background: white url('http://www.planete-trucages.com/images/images_wallpapers/wallpaper00000002.jpg') no-repeat center top;

[Wormholesurfer]

ok je vais essayer il me semble avoir refait la syntaxe apres car oui je m'etais eprcu de l'oubli des () bref .. je vais refaire .. sinon je l'avais place au bon endroit c bon ?

 

Merci bcp en tt cas c cool !

[Stéphane Chonez]

ou oui dans #body de globall.css c'est parfait.!

[Wormholesurfer]

je viens de reessayer, cette fois ci pas de doute je n'ai pas fait d efaute et cela ne marche toujours pas ...

j'ai utiliser le code de Stephane

[Wormholesurfer]

<p>voici ce que g dans le debut de la css je ne sais pas si je met bien la ligne où il faut :</p>

<p> </p>

<p> </p>

<div>/*</div>

<div>PrestaShop CSS</div>

<div>18 used colors: </div>

<div>10 grays: #374853 #595a5e #5d717e #76839b #888 #bdc2c9 #d0d1d5 #d0d3d8 #e5e6e7 #f1f2f4</div>

<div>4 fushias: #f6dce8 #dd2a81 #971d58 #5d0630</div>

<div>2 yellows: #f8e1a0 #f9e400</div>

<div>1 green: #488c40</div>

<div>1 red: #da0f00</div>

<div>*/</div>

<div> </div>

<div>* {</div>

<div>padding: 0;</div>

<div>margin: 0</div>

<div>}</div>

<div>body {</div>

<div>background-color: white;</div>

<div>font-size: 11px;</div>

<div>font-family: Verdana, Arial, Helvetica, Sans-Serif;</div>

<div>color: #5d717e;</div>

<div>text-align: center</div>

<div>background: white url('http://www.AMOI.com/img/wallpaper00000002.jpg') no-repeat center top;</div>

<div>}</div>

<div> </div>

<div>/* Useful */</div>

<div>.align_center { text-align: center }</div>

 

[Stéphane Chonez]

je viens de voir que tu as oublié le ";" après text-align: center;

du coup le background n'est pas interprété!!

[Wormholesurfer]

c bon j'ai reussi g mis le code juste apres la balise body en tout premier et cela fonctionne !

 

merci bcp

[Wormholesurfer]

je viens de voir que tu as oublié le ";" après text-align: center; du coup le background n'est pas interprété!!

on a poste en meme temps !

j'ai juste deplacer le code au debut sans toucher au reste et cela marche... je ne comprend pas ...

 

Bon par contre il va y avoir de l'optimisation de background a faire pour bien faire ressortir les block ... ya pas a dire c'est un métier !

[Wormholesurfer]

j'avais fait une sauvegarde du fichier global.css avant mes modif et apres verif le ";" n'y est pas non plus ... etrange

[Wormholesurfer]

Petite question est il possible d'afficher 2 image en background de mon site ?

l'une a gauche et l'autre a droite?

et eventuellement une en haut, en bas ? bref quel sont les ligne de code pour le placement d'une image ?

a la vue du code que vous m'avez deja donner, je mettais Center top...

je suppose que ca serai un truc du style center left, center right, ... cela peut etre autre chose que center ?

ou alors je me trompe peut etre et ca sera un truc du style left top, left bottom , right top, right bottom , ... ?

 

Bref si vous pouvez me donenr les lignes de code ca serai genial !! merci bcp

[Stéphane Chonez]

ça c'est pas possible! tu ne peux pas appliquer 2 background sur un élément (ton body).

 

ce que tu peux faire c'est créer un image avec les 2 en faisant attention au poids car si tu veux être cohérent sur des résolution importante, il faut que ton image fasse 1680px de large.

ce que je tu peux faire c'est "supprimer" la zone de contenu de ton site. si ton site à une largeur de 990 px tu supprime une zone de 990px au centre de ton image.

pour être plus clair regarde ce visuel http://i4.cdscdn.com/struct/common/op/bg_bodyRepeat.png

[Wormholesurfer]

yes ok pige

 

merci bcp

[Sacra Minh]

Bonjour,

 

Mais du coup est il possible de mettre un background différent par page ? Par exemple un par catégorie ?

Parce que du coup je suppose qu'il ne faut pas le mettre dans le body mais il faudrait le mettre ailleurs...

 

Merci !

[Stéphane Chonez]

Salut Sacra!

 

je viens de te répondre dans le post que tu as créés à ce sujet

[Wormholesurfer]

Bonjour à tous, je reviens vers vous car après avoir essayer l'incrustation d'une image dans mon backgroud de mon site j'aimerai essayer l’incrustation d'un dégrade de couleur .

j'ai essayer ce site :http://gradcolor.com/ qui m'as généré une image en format png que j'ai uploader via ftp dans le repertoire image de mon site ainsi qu'un code html de ce type :

 

 

<html>

<head>

<style type="text/css">

body { background-image:url(lkxckU.png);background-repeat:repeat-x; }

</style>

</head>

<body>

<p>a text example</p>

</body>

</html>

 

je pense que la manip est la même ou en tout cas similaire à celle pour inscruster un une image traditionnelle comme je l'avais precedemment fait mais je n'y suis pas arrive ...

 

Auriez vous des conseils svp ?

 

Merci

[phoneaccessoire]

Si vous ne souhaitez pas vous prendre la tête, module changebackground gratuit

[laboutiqueduliege]

Il y a encore plus simple :

 

Vous prenez un outil FTP (voir sur google l'utilisation de ce genre d'outil)

 

dans le répertoire de votre site :

 

votre_nom_de_domaine_de_votre_boutique/img

 

Vous allez y transférer la photo qui vous servira de fond de page

 

Ensuite vous irez :

 

votre_nom_de_domaine_de_votre_boutique/themes/nom_de_votre_theme_courant/css

 

Vous y trouverez le fichier global.css

 

1 - Vous télécharger ce fichier sur votre ordinateur

 

2 - Vous sauvegardez chez vous une copie original de ce fichier

 

3 - Vous modifiez ensuite ce fichier :

 

  Vous allez trouvé le terme body {

 

  exemple :

 

  body {

  background:#ffffff;

  color:#444444;

  font-family:Arial, sans-serif;

  font-size:12px;

  line-height:16px;

  -webkit-text-size-adjust:100%;

 

   <---------------------------------------- C'EST A CET ENDROIT QUE VOUS ALLEZ RAJOUTER DES LIGNES

 

  }

 

 

Donc à l'endroit indiqué vous rajouter ceci :

 

  background-image:url('/img/mon_fichier_fond_de_page.png');

  background-repeat:no-repeat;

  background-color::#ffffff;

  background-position:'left top';   

  background-size: cover;   /* permet d'étendre votre image sur la page */

 

 

4 - Vous sauvegardez votre fichier global.css

 

5 - Vous le transférez au même endroit que l'original

 

6 - Votre outil FTP va vous dire "voulez-vous écrasez...?" et vous répondez "Oui"

 

Et voilà fini !

 

Vous voilà avoir économisez 100 euros et avoir un fond de page gratis à votre convenance. Cela valait le coup de faire quelques manip !

[LouisGtier]

Bonjour,

 

J'ai installé le module advanced background . J'ai donc bien l'image en arrière plan. Par contre (chose logique certes) mais suivant la résolution de l'écran, mon arrière plan est presque invisible. c'est à dire que sur un écran large, je vois bien le visuel mais sur un écran plus petit, je ne vois presque rien car la homepage du site prend toute la place.

 

Comment résoudre le problème ?

 

merci par avance pour vos réponses.

 

Louis