- RESOLU... intégrer une IMG au body et bloc central...

[langelin]

Bonjour,

 

je voudrai placer un background personnel... et je cherche depuis pas mal de temps dans quel fichier ".css" je dois mettre le lien relatif .

 

J'ai mis mon img dans le dossier "img" du dossier "theme".

Fireburg m'oriente sur "783ceda99d294d6074401322214a385a_all.css" mais malgré mes essais, rien ne va, je ne vois pas de différences en page d'acceuil

 

Comment puis-je placer une img de fond sur le body et comment mettre une autre img ou une couleur en fond du bloc central comprenant les colonnes droites et gauches (#page)?

 

Pour version 1.4.8.2 et je verrai aussi pour la 1.5.2 après si j'y arrive.

 

Merci d'avance pour votre aide,

cordialement.

Edited April 5, 2013 by langelin (see edit history)

[caramel77]

Bonjour

 

C'est dans la partie body du fichier golbal.css en utilsant le chemin relatif ou vous avez mis votre image.

 

Bonne journée

[Bondaty and Co]

réponse supprimée, aucun suivi du demandeur

Edited February 23, 2013 by Muche (see edit history)

[langelin]

Bonjour caramel77,

 

J'ai bien trouvé l'endroit et vous remercie!

Maintenant, pour continuer sur la lancée, au lieu de mettre un morceau d'image en "repeat" qui va me créer un fond, je souhaite réaliser un template sous forme d'image que je poserai donc à cet emplacement en relatif.

 

Mais quel format dois-je adopter afin qu'il corresponde au body dans sa généralité?

 

Cordialement.

[Bondaty and Co]

A insérer dans le global.css -> html

Prévoir une image de 2000px x 1300px dans le dossier img du thème

Passez le background du body en transparent;

L'image s'adaptera aux divers tailles de navigateur

 background: url(../img/votreimage.jpg) no-repeat center fixed;
 -webkit-background-size: cover; /* pour Chrome et Safari */
 -moz-background-size: cover; /* pour Firefox */
 -o-background-size: cover; /* pour Opera */
 background-size: cover; /* version standardisée */

petite démo: http://shop.six-trois-com.fr/demo/myjewelry/index.php

Edited March 6, 2013 by Muche (see edit history)

[langelin]

Bonjour Muche,

 

tres joli thème en démo et très parlant, le jour ou je saurai faire cela, c'est que j'aurai vraiment le temps de travailler du code il est à la fois non agressif et très suggestif.

 

Merci beaucoup pour ces infos très utiles

Bref, c'est tout à fait ce que je cherche à réaliser!

 

Je vais travailler cela mais le format d'une image de cette grandeur va se compter en MO au lieu de KO, elle va être très lourde?

Il faut la compresser au maxi, non?

 

Cordialement

[Bondaty and Co]

Il faut arriver à trouver un bon compromis entre qualité et poids.

pour celle de l'exemple elle fait 159 Ko

[langelin]

bon, j'ai fouiné un peu et trouvé que l'on pouvait compresser une image sans changer son format, j'avais encore pas eu l'occasion de chercher plus précisément la -dessus.

 

Bref, j'ai compressé une image qui me convient, je fais l'essai ce soir et donne le rendu ici pour voir si c'est acceptable...

 

A+

[langelin]

Bien, j'ai donc effectué les actions suivantes sur la 1.4.8.2 :

 

- placé le code dans "body" et pas "html" pour avoir l'img en fond de site, sinon cela la place derrière les colonnes centre-droite et gauche... et pas trouvé de code pour "html" dans global.css.

 

- placé l'img dans le dossier img; rien de compliqué...

 

- tenté la transparence avec "transparent" dans #page mais cela rend mon texte de colonne centre illisible car trop transparent!

Si je met une couleur et essaie la transparence, la couleur n'apparait pas...

si je tente de varier avec "opacity", quel que soit le degré (0.5 ou 0.3 ou 0.8) avec ou sans couleur, cela ne change rien : toujours transparence totale mais les colonnes restent intactes dans tous les cas de figure

 

J'ai du mal à comprendre ce qui cloche encore...

 

=> bon j'ai obtenu un résultat avec le système rgba de CSS3 :

#page {
width: 980px;
margin: 0 auto 2px auto;
text-align: left;
background-color: rgba(227, 253, 200, 0.4);

 

voilà le rendu : Prestashop

 

Je vais essayer d'améliorer maintenant car les colonnes sont toujours pleines, pas de transparence...

[Bondaty and Co]

pour la page je vous conseille une image png transparente de 10px x 10px, qui s'adaptera également aux navigateurs plus anciens avec ce code:

background: url(../img/votreimg.png) repeat;

[langelin]

Là pour le coup je ne suis pas convaincu... j'ai essayé avec un morceau ou deux "piqués" sur des photos et travaillés mais le rendu est moins correct que la couleur.

 

Il faut dire que je n'ai pas de bibliothèque d'image et je perd de nouveau du temps à chercher cela.

Savez-vous ou trouver des éléments d'images prêts à l'emploi?

Merci

[langelin]

Bonjour Muche,

 

après un moment d’absence, je reviens simplement pour vous proposer de voir ce que j'ai pu réaliser et avoir votre avis... la Boutique

 

Ce n'est certainement pas professionnel mais est-ce acceptable?

 

Je note un peu plus de mouvement clientèle depuis le changement...

 

Par avance, merci de votre avis.

 

Cordialement

Edited March 28, 2013 by langelin (see edit history)

[Bondaty and Co]

Bonjour,

 

il reste pas mal de travail au niveau de la qualité du header et des images produits

je ne suis pas fan du vert transparent

les pub google, c'est pas top

 

bon courage

[langelin]

Bonjour Muche,

merci pour cette perception.

 

Pour le header et les Pubs, je suis contraint par le "formatage" de presta car je ne sais pas encore comment travailler sur les formats ou modules concernés. Cela n'a pas été une priorité!

La qualité des images est en effet due à mon petit matériel de poche, je n'ai pas les moyens d'acheter un meilleur outil pour l'instant.

 

Après recul, le vert est trop prononcé, j'en conviens. Mais je vais garder cette teinte plus nuancée car, côté visuel, elle inspire le côté "naturel et propre" de la démarche.

 

Je ne pourrais pas arriver à créer une boutique PRO avec mes seuls moyens de toute manière!

 

Cordialement.