image de fond

[proker44]

bonjour tous le monde alors je cherche comment mettre image de fond mais j'ai pas trouver est ce quelqu'un a un tuto ou peut m'expliquer comment je dois faire ??

[ckarone]

Bonjour,

Voici la solution mais je pense que la fonction recherche sur le forum n'est pas la pour rien hein!

body {

   background-image: url('img/image-de-fond.jpg');
   background-repeat: no-repeat;
   background-position: center top;
}

Attention au poids de l'image !!

Bilyx

[proker44]

et je met sa ou ??

[ckarone]

Dans le fichier CSS de ton thème au début.
le css est situé dans: dossier-boutique/themes/ton-theme/css/global.css

ce qui donne au départ:

body {
   background-color: white;
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #5d717e;
   text-align:center;
}

tu remplaces par :

body {
   background-color: white;
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #5d717e;
   text-align:center;
       background-image: url('img/image-de-fond.jpg');
       background-repeat: no-repeat;
       background-position: center top;

}

Ton image de fond est à placer dans le dossier img à la racine de ta boutique!

[proker44]

par contre je pense que sa faire comme la banniere je tente de mettre a chaque fois met marche pas et je comprend pas donc je vais tenter merci et je vous tiens au courant

[proker44]

/*
PrestaShop CSS
18 used colors :
10 grays: #374853 #595a5e #5d717e #76839b #888 #bdc2c9 #d0d1d5 #d0d3d8 #e5e6e7 #f1f2f4
4 fushias: #f6dce8 #dd2a81 #971d58 #5d0630
2 yellows: #f8e1a0 #f9e400
1 green: #488c40
1 red: #da0f00
*/

* {
padding:0;
margin:0;
}

body {
background-color: white;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color: #5d717e;
text-align:center;
background-image: url('img/tuile-bleu-ciel.jpg');
background-repeat: no-repeat;
background-position: center top;

}

/* Useful */
.align_center { text-align:center; }
.align_right { text-align:right; }
.middle { vertical-align: middle; }
.align_justify{ text-align: justify; }
.uppercase { text-transform:uppercase; }
.hidden, .collapsed, .block_hidden_only_for_screen { display:none; }
.wrap { white-space: normal; }


alors c'est bon ??

[proker44]

alors j'ai fait ce que tu ma dit mais regarde c'est bizarre ce que sa fait www.shoppizi.com

[ckarone]

OK il faut répéter l'image et pas la centrer!

body {
   background-color: white;
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #5d717e;
   text-align:center;
       background-image: url('img/image-de-fond.jpg');
    background-repeat: repeat-x;
}

Bilyx

[proker44]

je copie le code tu ma donner a la place de celui que tu ma donner tout a l'heure ??

[ckarone]

oui remplaces le premier par ce dernier .

Bilyx

[proker44]

voila j'ai fait et sa change rien a par qu'il y a plus rien

[ckarone]

Bon alors changes par celui-ci:

body {
   background-color: white;
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #5d717e;
   text-align:center;
   background-image: url('../../../img/bg-body.jpg')
   background-repeat: repeat-x;
}

[proker44]

alors j'ai changer mais toujours rien c'est etrange quand meme je comprend pas

[ckarone]

c'est quoi l'url exacte de ton image de fond?

[proker44]

ba je sais pas coment je sais sa mon image est dans mon ordi au dossier image et sur filezilla j'ai mit dans img

[proker44]

a mon avis je peut pas changer peut etre que sa viens de sa ??

[ckarone]

Test ceci:

body {
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #5d717e;
   text-align:center;
   background-image: url('http://www.shoppizi.com/img/bg-body.jpg');
   background-repeat: repeat-x;
}

[proker44]

rien du tout sa fait bugger tout mon site lol je comprend pas

[proker44]

www.shoppizi.com mon site a bugger de quoi sa vient ??

[proker44]

/*
PrestaShop CSS
18 used colors :
10 grays: #374853 #595a5e #5d717e #76839b #888 #bdc2c9 #d0d1d5 #d0d3d8 #e5e6e7 #f1f2f4
4 fushias: #f6dce8 #dd2a81 #971d58 #5d0630
2 yellows: #f8e1a0 #f9e400
1 green: #488c40
1 red: #da0f00
*/

* {
padding:0;
margin:0;
body {
background-color: white;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color: #5d717e;
text-align:center;
background-image: url('../../../img/bg-body.jpg')
background-repeat: repeat-x;
}

/* Useful */
.align_center { text-align:center; }
.align_right { text-align:right; }
.middle { vertical-align: middle; }
.align_justify{ text-align: justify; }
.uppercase { text-transform:uppercase; }
.hidden, .collapsed, .block_hidden_only_for_screen { display:none; }
.wrap { white-space: normal; }
.bold { font-weight: bold; }
.strike { text-decoration:line-through; }
.italic { font-style: italic; }
.top { vertical-align: top; }
.span_link { cursor:pointer; }
.span_link:hover { text-decoration:underline; }
.clear { clear:both; }
br.clear {
clear:both;
line-height:0;
font-size:0;
height:0;
}
noscript ul {list-style-type:none; background:black; color:white; padding:10px; border:1px solid gray;}

/* Footer links */
ul.footer_links{
list-style-type:none;
clear:both;
height:2em;
margin-top:2em;
}
ul.footer_links li{
float:left;
margin-right:2em;
height:2em;
}
ul.footer_links li a{ text-decoration:none; }
ul.footer_links li a:hover{ color:black; }
ul.footer_links li img.icon{ vertical-align:-2px; }

/* transfert effect*/
.transferProduct { border: 2px solid #888; }

/* simple list inline */
ul.inline_list{ list-style-type:none; margin-top: 1em; }
ul.inline_list li { float:left; text-align:center; }
ul.inline_list li img{ display:block; }
ul.half {
width: 45%;
margin-right: 1em;
float: left;
}

/* Category tree (i.e. in sitemap) */
div.tree_top {
background:url('../img/sitemap-top.gif') no-repeat -1px -3px;
padding-left:24px;
padding-bottom:5px;
padding-top:3px;
}
ul.tree, ul.tree ul{ list-style-type:none; }
ul.tree li{
padding-left:1.2em;
border-left:1px gray dotted;
background:url(../img/sitemap-horizontal.gif) no-repeat left 10px;
margin-left:1em;
}
ul.tree a{ padding-left:0.2em; }
ul.tree a.selected{ font-weight:bold; }
ul.tree li.last{
background:url(../img/sitemap-last.gif) no-repeat -12px -2px;
border:none;
}
span.grower{ cursor:pointer; }

/* Tabs */
ul.idTabs {
list-style-type:none;
border-bottom:solid 1px #76839b;
height:21px;
margin-top:1em;
}
ul.idTabs li {
float:left;
margin-right:1px;
}
ul.idTabs li a {
background-image: url('../img/tab_bg.jpg');
display:block;
width:173px;
height:18px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
font-weight:bold;
padding-top:3px;
color:#374853;
}
ul.idTabs li a.selected{
background-image: url('../img/tab_bg_selected.jpg');
color:white;
}

/* IdTabs Short*/
ul.idTabsShort li a {
background-image: url('../img/tab_bg_short.jpg');
width:138px;
}
ul.idTabsShort li a.selected{
background-image: url('../img/tab_bg_selected_short.jpg');
color:white;
}

div.sheets{
clear:both;
padding:1em;
}
div#more_info_sheets ul li{ margin-bottom:0.4em; }

/* global style */
a {
color: #5d717e;
text-decoration: underline;
outline: none;
}
a:hover {
text-decoration: none;
}
input:focus {
outline: 0;
outline-offset: 0;
}
a img {
outline: none;
border: none;
text-decoration: none;

voila le debut du code que j'ai trifouillé

[Atch]

Il te manque un point virgule après ton background-image dans body

ps : merci d' utiliser la balise code la prochaine fois ce serait plus lisible.
Et pas besoin de nous mettre 50 lignes en sachant que tu n as modifié que le body
v++

atch

[proker44]

body {
background-color: white;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color: #5d717e;
text-align:center;
background-image: url('../../../img/bg-body.jpg');
background-repeat: repeat-x;
}


comme cela ??

[proker44]

svp aidez moi mon site est devenue est horrible help me help me

[proker44]

Svp Amie prestashopien aidez moi je suis dans le ....

[kriboy]

Euh ...
Tu as touché qu'au CSS ou tu a changé autre chose ?
Parce que la, j ai l impression que c est ton chemin dans le fichier setting qui est mauvais !

Si effectivement c est ton CSS, j espere que tu as fait une sauvegarde.

[Atch]

Moi j'aime bien comme ça!!!

L'histoire de l'image de fond est un sujet traité x fois avec toujours les mêmes réponses, si malgré toutes ces réponse tu n'y arrives pas , je ne peux que te conseiller d'apprendre les bases du HTML et CSS. (il y a plein de site pour cela)

Pour ton erreur, remets ton fichier avant modif ( tu avais une copie j'espère!)

Mince, je ne peux pas clore le sujet...

V++

Atch

[proker44]

Ba non jai pas de copie sa veut dire qu'il faut je recommence tout ?? Pourtant jai juste changer ou il y a ecrit body donc je doit bien pouvoir remettre ??

[kriboy]

Si tu as juste changer le body, essaies de remettre le CSS du thème par défaut.
Si tu ressayes de modifier le CSS, un conseil, fait une copie du theme par defaut, et entraines toi sur celui la.

[proker44]

Et je fait comment pour remettre par default ta le code ?? Merci pour ta reponse sa me rassure car la j'ai passer enormement de temp dessu alors si faut je recommence je serait deg

[kriboy]

Tu télécharges a nouveau prestashop, et tu recuperes le global.css du theme par défaut que tu renvois sur ton serveur.

[proker44]

En faite je fair une copie de mon global.css que j'ai en ce moment après je supprime prestashop je reprend sur ovh et je modifie la partie du css ou j'ai changer ? C Bon si je fai sa ??

[proker44470]

quelqu'un peut m'aider je suis dans le caca

[pasko]

Bonjour,

Si tu à modifié ton fichier CSS original, sans avoir fait de copie au préalable, il te faut donc un nouveau fichier CSS.

Ensuite tu enverra ce nouveaux fichier CSS sur ton serveur distant, pour remplacer l'ancien.

Quelle est ta version de Prestashop?

Salut.