Jump to content

[Résolu] Remplacer la couleur de fond boutique par image


Recommended Posts

Bonjour,

Comment remplacer la couleur du fond de la boutique qui est par défaut "White" par une image de fond plus sympa autre qu'une couleur basique.


Cordialement à tous

Share this post


Link to post
Share on other sites

Merci de bien vouloir regardé les Posts dejas créer dans ce Forum
avant de Poster

Pour Info:
un exemple:


et si vous voulez aussi adapter sur votre fond d'écran une ombre




Merci de mettre [RESOLU] devant votre titre de post si c'est el cas

cdlt

Share this post


Link to post
Share on other sites
  • 5 weeks later...

Bonsoir,

Le post auquel tu fais référence ne répond pas à la question posée... Il permet de changer la COULEUR de fond, mais n'explique pas comment mettre une IMAGE de fond en remplacement de la couleur.

A+

Share this post


Link to post
Share on other sites

Salut

Oui en effets, ça ne repond pas a ta question, je suis aussi interresse par la possibilité de mettre une image en fond, mais je ne pense pas que se soit possible.

A+

Ray

Share this post


Link to post
Share on other sites

J'ai trouvé ça sur un post en espagnol :

Dans le CSS global, mettre dans la balise body :

body {
background-color:#fff; font-size: 11px; font-family: Verdana, Arial, Helvetica, Sans-Serif; color: #5d717e; text-align:center; background-image:url(’../img/back3.png’); ////URL de l'image de fond (pour changer la manière dont l'image va se répéter : background-repeat:repeat-x; )
}

Pour que le bloc central reste blanc et que tu ne vois pas l'image de fond sous tes blocs :

#page { width: 980px; margin: 0 auto 2px auto; text-align:left; background-color:#FFF;
}

ATTENTION, JE N'AI PAS TESTÉ !
A+

Share this post


Link to post
Share on other sites

Dans le CSS global, mettre dans la balise body :
body {
background-color:#fff; font-size: 11px; font-family: Verdana, Arial, Helvetica, Sans-Serif; color: #5d717e; text-align:center; background-image:url(’../img/back3.png’); ////URL de l'image de fond (pour changer la manière dont l'image va se répéter : background-repeat:repeat-x; )
}
Pour que le bloc central reste blanc et que tu ne vois pas l'image de fond sous tes blocs :
#page { width: 980px; margin: 0 auto 2px auto; text-align:left; background-color:#FFF;
}

ATTENTION, JE N'AI PAS TESTÉ !
A+


Déjà tu as une belle erreur dans ton code avec les trois /// et ensuite il faut l'alléger pas la peine de laisse tout ça :-).
Voilà le code à mettre pour avoir une image de fond de votre choix.
body { background: #000000 url(../img/TONIMAGE.jpg) repeat scroll top; font-size: 11px; font-family: Verdana, Arial, Helvetica, Sans-Serif; color: #5d717e; text-align:center; }



Ton image est à mettre à la racine du site et ça roule tout seul ;-) .

Share this post


Link to post
Share on other sites
J'ai trouvé ça sur un post en espagnol :

Dans le CSS global, mettre dans la balise body :

body {
background-color:#fff; font-size: 11px; font-family: Verdana, Arial, Helvetica, Sans-Serif; color: #5d717e; text-align:center; background-image:url(’../img/back3.png’); ////URL de l'image de fond (pour changer la manière dont l'image va se répéter : background-repeat:repeat-x; )
}

Pour que le bloc central reste blanc et que tu ne vois pas l'image de fond sous tes blocs :

#page { width: 980px; margin: 0 auto 2px auto; text-align:left; background-color:#FFF;
}

ATTENTION, JE N'AI PAS TESTÉ !
A+


Bonjour,
pas besoin d'aller sur un post espagnol pour trouver ce genre de réponse, la partie Fr suffit avec un petit peu de recherche approfondi
Le plus Simple c'est d'utiliser aussi FireBug ou FireBug Lite

la manip la plus courant est dans global.css

body { background: #000000 url(../img/imagechoisi.jpg) repeat scroll top; font-size: 11px; font-family: Verdana, Arial, Helvetica, Sans-Serif; color: #5d717e; text-align:center;
}

Share this post


Link to post
Share on other sites

@Nico46
Nan biensur , mais euh... quand meme :P :-)
Et Ps: votre site Dream's Pc est Graphiquement Sympa


@Backswing Conseil
Je penses que vous devriez lire un peu plus les posts du Forum au lieu de poster stupidement
Si je n'ai pas trop donner d info à LennyNero .C'est pour certains raisons ( donc celle de ne pas assez chercher sur le forum FR, pour avoir des infos)qui ont été stipulées dans certain de ses anciens Postes


@ray96
En espérant avoir répondu à votre demande

cdlt

Share this post


Link to post
Share on other sites

Tu m'étonne, plutôt froid, ça donne pas trop envie de poser des question, Brrrrrrr!

Mais bon, ça marche pour moi et c'est cool.

Merci beaucoup a tous


A+

Ray

Share this post


Link to post
Share on other sites
Tu m'étonne, plutôt froid, ça donne pas trop envie de poser des question, Brrrrrrr!
Mais bon, ça marche pour moi et c'est cool.
Merci beaucoup a tous
A+
Ray


Pourquoi l'accueil est froid sur ce forum? je t'ai donner la solution il me semble sans être agressif ou quoi que ce soit d'ailleurs.
On donne simplement le conseil à certaines personne de faire de plus amples recherche avant de poster car certaines personnes ont la fâcheuse tendance à poster plusieurs fois pour la même chose où ne prenne pas la peine de chercher sur le forum Français, c'est tout rien d'agressif ou autres.
Aller tan mieux si ça marche pour vous c'est le but du jeux, donner les réponses pour aider au max.
A pluche.

@ Maury Girard: Merci du compliment c'est très sympa de ta part ;-).

Share this post


Link to post
Share on other sites
Quel accueil sur ce forum ça fait peur

nico46 a la bonne démarche. Vous connaissez le proverbe chinois entre donner un poisson et enseigner à pécher... Ses conseils sont bons : penser à pécher les informations, et si pas trouvées, demander le poisson... :-D

Share this post


Link to post
Share on other sites

Bonjour,

je tente de suivre vos indications pour changer l'image de fond mais quand avec firebug je remplace:
body {
background-color: white;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color: #5d717e;
text-align:center;
}


par


body { background: #000000 url(../img/pelote.jpg) repeat scroll top;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color: #5d717e; text-align:center;
}

où j'ai bien mis pelote.jpg dans le dossier racine img/ et bien j'obtiens un écran noir et c'est tout.
je n'obtiens absolument pas l'image que je voulais.

quelqu'un peut il me dire d'où cela provient ?

en fait mon souhait est simplement d'avoir une image de fond dans la colonne de gauche, lle tout sur fond blanc.

merci.

Share this post


Link to post
Share on other sites

merci de ces premiers renseignements.
toutefois cela n'a eu aucun effet. Quand j'intègre le code avec firebug, le background de mon site devient noir et aucune image à l'horizon ?!!
faut il un format partciulier pour l'image (taille pixels, extension...).

merci

Share this post


Link to post
Share on other sites

en fait ça marche en ne copiant et insérant que la ligne de code :
background: #000000 url(../img/pelote.jpg) repeat scroll top;

et en laissant le reste.

par contre j'aurai souhaité que l'image ne soit que sur les 2 bords extérieurs et ne vienne pas en arrière plan du bloc central où j'ai mon prestashop car je trouve cela trop chargé, comment faire ?

merci

Share this post


Link to post
Share on other sites

Bonjour

dans ton code, la balise <body> représente l'ensemble de la fenêtre
donc lorsque tu écris :

body{

background : etc..

}



le fond s'applique à l'ensemble de ta fenêtre. ce qui peut effectivement paraître trop chargé

Si tu veux donner un fond à des éléments particuliers de ta page, par exemple "les 2 bords extérieurs", utilise firebug pour savoir comment ces blocs sont nommés.

ensuite tu n'as qu'a adapter ton css :

leNomTrouvéGraceAFirebug{

background : etc..

}



si c'est du type class="leNomTrouvéGraceAFirebug" ajoute un point devant le nom >> .leNomTrouvéGraceAFirebug
si c'est du type id="leNomTrouvéGraceAFirebug" ajoute un # devant le nom >> #leNomTrouvéGraceAFirebug

est ce que ça t'aide ?

Share this post


Link to post
Share on other sites
  • 2 weeks later...

Salut à tous,

J'ai fait cette manip mais seule la couleur de l'arriere plan change, l'image ne s'affiche jamais.

Voici mon code

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

Une idée ???

Merci





J'ai trouvé ça sur un post en espagnol :

Dans le CSS global, mettre dans la balise body :

body {
background-color:#fff; font-size: 11px; font-family: Verdana, Arial, Helvetica, Sans-Serif; color: #5d717e; text-align:center; background-image:url(’../img/back3.png’); ////URL de l'image de fond (pour changer la manière dont l'image va se répéter : background-repeat:repeat-x; )
}

Pour que le bloc central reste blanc et que tu ne vois pas l'image de fond sous tes blocs :

#page { width: 980px; margin: 0 auto 2px auto; text-align:left; background-color:#FFF;
}

ATTENTION, JE N'AI PAS TESTÉ !
A+


Bonjour,
pas besoin d'aller sur un post espagnol pour trouver ce genre de réponse, la partie Fr suffit avec un petit peu de recherche approfondi
Le plus Simple c'est d'utiliser aussi FireBug ou FireBug Lite

la manip la plus courant est dans global.css

body { background: #000000 url(../img/imagechoisi.jpg) repeat scroll top; font-size: 11px; font-family: Verdana, Arial, Helvetica, Sans-Serif; color: #5d717e; text-align:center;
}

Share this post


Link to post
Share on other sites

Bonjour

as tu bien placé l'image dans le bon dossier ? es tu sur que ça n'est pas bg.jp[red]e[/red]g ?
quan du survoles avec firebug ce bout de code [red]url(../img/bg.jpg)[/red] , arrive t il à trouver ton image ?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More