Jump to content

Mettre un background uniquement sur la page d'accueil


Recommended Posts

Bonjour tout le monde !

 

Je cherche en vain, une solution pour modifier le fond de ma page d'accueil uniquement.

 

J'ai trouve plusieurs discussions a ce sujet, mais celle ci sont obsolètes (version 1.5) et ne fonctionne pas sous ma version 1.6.1.11.

 

Je voudrais garder les autres pages sur le fond d'origine, (je les changerais peut etre plus tard, si je trouve la procedure). 

 

J'utilise le theme par defaut de prestashop.

 

Merci beaucoup.

 

 

Link to comment
Share on other sites

En CSS c'est très simple.

Le body de la page d'accueil a un id ("index").

 

Donc si tu déclares 2 règles comme ceci

body{
  background-image:('background.jpg');
}

body#index{
  background-image:('background-homepage.jpg');
}

Tu auras une image de fond différente pour la homepage

Edited by BeComWeb (see edit history)
Link to comment
Share on other sites

Merci pour ta réponse.

 

J'ai donc fais ce que tu as écris, dans le global.css mais rien ne se passe.

 

Puis je l'ai mis de la maniere suivante : 

body{
  background-color: #fff;
}


body#index{
  background-image: url("background-homepage.jpg");
}

Avec bien sur le bon chemin vers mon image de fond.

 

Pas de changement...

Edited by CharOole (see edit history)
Link to comment
Share on other sites

Oui en effet, j'ai trouvé ça bizarre, quand j'ai fait une recherche dans Atom mon editeur de texte, il me l'a pas trouvé.

 

Oui oui bien sûr, je suis bien dans le dossier theme -> bootstrap -> css -> global css 

 

et pour les caches, je les vides a chacune de mes modifs. 

 

alors je ne sais pas pourquoi.....

Link to comment
Share on other sites

Moui, enfin si la règle n'y est pas quand tu regardes le fichier c'est que tu ne l'as pas mise ou que tu as fait une erreur de syntaxe. Elle ne s'est pas fait la malle pendant le transfert FTP  :P

 

Tu crées un nouveau fichier CSS vide, tu mets ces règles dedans et tu uploades le fichier dans themes/default-bootstrap/css/autoload

Link to comment
Share on other sites

ok je ne connaissais pas du tout cette procedure, je vais tester ça de suite.

 

Par contre en ce qui concerne le body#index, je ne pense pas l'avoir enlevé par mégarde... puis je viens de vérifier sur 2 autres prestashop que j'ai également sous la version 1.6.1.11 et le "body#index" n'y est pas non plus.....

Link to comment
Share on other sites

Bon alors j'ai fait un fichier au nom de "custom.css" que j ai mis dans autoload

 

avec les règles suivantes : 

body{
  background-color: #fff;
}


body#index{
  background-image: url(".../img/totorogreen.jpg");
}

Mon image de fond, se trouve dans le dossier "theme -> default bootstrap -> img"

 

Voila, cela ne me trouve pas l'image, quand je fais inspecter l'element il me sort une erreur et ne trouve pas l'image. (pour être sure j'ai fais le test avec plusieurs chemin differents) mais rien non plus. 

Link to comment
Share on other sites

bon je viens de trouver une solution sans passer via autoload

 

j'ai tout simplement rajouté à la fin de mon fichier global.css

body#index .columns-container {
   background: url("../img/totorogreen.jpg");
 }

et là, le miracle opéra.

 

En tout cas, merci beaucoup à tous les deux, grâce à vous j'ai appris des nouvelles choses  :rolleyes:

Link to comment
Share on other sites

bon je viens de trouver une solution sans passer via autoload

 

j'ai tout simplement rajouté à la fin de mon fichier global.css

body#index .columns-container {
   background: url("../img/totorogreen.jpg");
 }

 

Oui parce qu'il n'y a qu'une seule récursion à faire (sortir de css) au lieu de 2 pour l'autre solution (sortir de autoload puis sortir de css).

Je dis pas ça pour faire le mec pointilleux, simplement il faut bien comprendre le principe des récursions si tu veux éviter de passer des heures à tourner en rond sur ce genre de cas.

 

Félicitations en tout cas.

Et pense à passer le topic en "[Résolu]"

Link to comment
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...