Jump to content

J'arrive à placer 1 Image en Background mais pas comme ceci :

sophip
 Share

Recommended Posts

sophip Newbie

sophip

Posted
Posted

Bonjour

Je voudrais placer une image exactement comme sur la capture du site tuto :

http://www.webetplus.fr/tutoriel-prestashop-new-modifier-fond/

imagefond.jpg

 

Voila J'ai suivi ce tuto mais mon image apparaît partout ou il y à du blanc ( milieux et coté) 

voici mon code :

.columns-container {
  background: white; 
  background-image:url(../img/usa.jpg) ;
  background-position: top center;
background-repeat: no-repeat  }

Comment procéder s'il vous plaît ? faut-il remplacer "Top center" par quelque chose comme "extremiter" ?

 

merci j'ai passé l’après midi entière à placer une image et maintenant je cherche à la replacer.... :(

Link to comment
Share on other sites
titityler Newbie

titityler

Posted
Posted 
.columns-container {
  background: white; 
  background-image:url(../img/usa.jpg) ;
  background-position: top center;
background-repeat: no-repeat  }

Ton code est faux. Tu lui demande de te mettre un "background blanc" et un fond d'écran tiré d'une image. Il va prendre en priorité ton background blanc donc tu ne verra pas ton image.

Link to comment
Share on other sites
Finality Newbie

Finality

Posted
Posted 
.columns-container {
  background: white; 
  background-image:url(../img/usa.jpg) ;
  background-position: top center;
background-repeat: no-repeat  }

Ton code est faux. Tu lui demande de te mettre un "background blanc" et un fond d'écran tiré d'une image. Il va prendre en priorité ton background blanc donc tu ne verra pas ton image.

 

 

Bonsoir,

 

le code est juste je vous invite à tester par vous même. En CSS, les règles sont exécutées dans l'ordre de définition, donc l'image sera bien affichée.

  • Like 1
Link to comment
Share on other sites
Druplay.Me Newbie

Druplay.Me

Posted
Posted (edited)

Pour un site de ecommerce, je te déconseille ce type de Background, qui ne met pas en avant les produits.

L'internaute ne doit pas être distrait et tu dois attirer son attention uniquement sur tes produits, tes promos etc...

 

Tu peux comparer cette image en haut de post avec le site de démo de Prestashop, et analyser la différence.

 

Dans les premières secondes il doit s'adapter au site, donc le détourner avec ce type d'image c'est pas très bon. C'est pareil pour les themes, si l'internaute pense que le site est beau (c'est subjectif) c'est le détourner aussi de l'objectif premier d'un site de e-commerce. Ensuite c'est une question de dosage

Edited by Druplay.Me (see edit history)
Link to comment
Share on other sites
sophip Newbie

sophip

Posted
  • Author
Posted (edited)

Coucou

.columns-container {
  background-image:url(../img/usa.jpg) top center no-repeat;
 }

et ligne 5239 
.container{
background: #FFF;
padding-left: 0;
padding-right: 0;
}

@++

 

Loulou66

Salut Loulou66 ton code ma bien aidé (c'était pas simple  ;) merci car même avec l'explication j'ai du chercher)

 

jai du placer ce code a la ligne 5266


.columns-container {
  background: white; 
  background-image:url(../img/usa.jpg) ;
  background-position: top center no-repeat;

et celui ci à la 5239 pour que l'image s'affiche bien sur les coté

.container  {
  background: #FFF;
    padding-left: 0;
    padding-right: 0; } 

est-ce normal ?

 

 

Il me reste quelque soucis.

 

la barre horizontal tout en haut "contactez-nous" aparait en blanc mais il reste une partie des extremité qui est resté noir .

le texte tout en bas de la page est sur fond blanc aussi. illisible.

 

je supose qu'il y à une autre ligne pour la couleur haut et bas horizontal et c'est à modifier ?

 

est-il important de respecter le numero de la ligne ou alors puis-je decaler de quelque ligne ?

 

ps: j'ai modifié le rand des ligne et du coup les couleur des barre (menu ) et black ne s'affiche plus.

 

voici le code et les ligne ( pourquoi les couleur ne s'affiche qu'on blanc ?) faut-il respecter l'ordre des élément ou alors l'ordre des lignes ? :


.header {
  z-index: 1;
  position: relative;
  background:#F1F1F1;
  padding-bottom: 15px; }
  //fond écran 5272
.icon-renren:before {
  content: "\f18b"; }

.container  {
  background: #FFF;
    padding-left: 0;
    padding-right: 0; }
  a:hover {
  text-decoration: none; }

@media only screen and (min-width: 1200px) {
  .container {
  
    padding-left: 0;
    padding-right: 0; } }
body {
  min-width: 320px;
  height: 100%;
  line-height: 18px;
  font-size: 13px;
  color: #777777; }
  body.content_only {
    background: none; }

textarea {
  resize: none; }

#header {
  z-index: 5003; }

.columns-container {
  background: white; 
  background-image:url(../img/usa.jpg) ;
  background-position: top center no-repeat;
  }
  //fond écran 5258

#columns {
  position: relative;
  padding-bottom: 50px;
  padding-top: 15px;
  background:#47382A;  }
  //COULEUR FOND CENTRE

#index .tab-content {
  margin-top: 35px;
  margin-bottom: 34px; }

merci

Edited by sophip (see edit history)
Link to comment
Share on other sites
loulou66 Rookie

loulou66

Posted
Posted

Coucou 

 

pour ce qui est des numero de ligne c'est normal il doit y a voir des instruction suplementaire chez toi tandis que moi je suis sur un PS vierge

 

pour la section "contactez-nous" toujours dans le global.cs

ligne 5282
 remplacer
header .nav .row {
      margin: 0px; }
par
 header .nav .row {
      background: #333333;
      margin: 0px; }

pour le bas de page ou il y a la newletter

ligne 6790
remplacer
 .footer-container #footer .row {
      position: relative; }
par
 .footer-container #footer .row {
      background-color: #3F3F3F!important;
      position: relative; }

je dois attire ton attention sur le fait que le thème est responsive  suivant le format des écran ( petit écran , tablette, smatphone) les changement ne peuvent pas être pris en compte

 

sur chrome tu as un plugin "Dimension" qui te permet d émuler les différentes taille comme ca avec la touche F12 tu peut voir les css a modifier 

 

@++

 

Loulou66

Link to comment
Share on other sites
sophip Newbie

sophip

Posted
  • Author
Posted

voici les 3 code concernéé :


  1. header {
  2. z-index: 1;
  3. position: relative;
  4. background: #F1F1F1;
  5. padding-bottom: 15px; }

5262:


  1. #columns {
  2. position: relative;
  3. padding-bottom: 50px;
  4. padding-top: 15px;
  5. background:white; }

5259:  (chez moi 5257)


  1. .columns-container {
  2. background-image:url(../img/usa.jpg);
  3. background-position: top center;
  4.  
  5. }

voilà j'ai modifié exactement commceci, j'éspers que sa fonctionnera pour toi ;-)


Link to comment
Share on other sites
  • 2 months later...
myselfidem Newbie

myselfidem

Posted
Posted (edited)

Après maintes et maintes tentatives, je suis parvenu a installer une image pour l'arrière-plan du site, de cette manière :

 

Modifications du fichier : .\themes\default-bootstrap\css\global.css

 ligne 5258 :
  .columns-container {
  background-image: url(../img/arcenciel2.jpg); 
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
   } 
  
  ligne 5274 :
  header {
  z-index: 1;
  position: relative;
  background-image: url(../img/arcenciel2.jpg); 
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover; 
  padding-bottom: 15px; }

J'espère que cela pourra aider !

 

Amicalement

 

*Edit : autre lien utile : http://cart-help.com/topic/63-background-change-in-prestashop-16/

post-777922-0-16478400-1403787466_thumb.jpg

Edited by myselfidem (see edit history)
Link to comment
Share on other sites
  • 1 month later...
Original Perso Newbie

Original Perso

Posted
Posted

:D  super je me suis pris la tête toute la journée sur internet piur trouver la solution!!!! Un grand merci maintenant j'ai une image entière sur mon site et surtout dans les catégories. Mais j'aimerais savoir comment changer la couleur des ecritures vu que j'ai mis une photo de fond de site avec grise.

Je suis sous prestashop 1.6 avec le thème de base.

 

Merci d'avance


Merci encore à myselfidem pour le problème résolu ;)

Link to comment
Share on other sites
  • 3 weeks later...

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
 Share
Go to topic listing
×
×
  • Create New...