background image à 100%

[Stacy Ann]

Bonjour,

je voudrais mettre une image en background de mon site, qui s'ajuste automatiquement à tout type de résolution, mais qui ne se répète pas... donc qui s'étire en fonction des écrans à 100%...

Une idée pour y parvenir?

D'avance merci et JOYEUX NOEL!!!

Cordialement.

Stacy Ann

Topic déplacé -yoya971

[Maury Girard]

Bonjour Stacy Ann
pour répondre à votre question
Il nous faudrait savoir déjà plusieurs choses

1/ quelle thème utilisez vous ? (payant ou free)
2/avez vous un lien direct sur votre boutique ?

Si votre question concerne le thème par défaut de prestashop, vous n'êtes pas dans la bonne section

Car Actuellement vous êtes dans
Thèmes
Contributions : proposition de *thèmes gratuits* et questions les concernant.

Ce thread devrait être dans la section d'Intégration ou Développement

Si si votre thème n'est pas celui par défaut
Merci de nous donnez les informations concernant les questions 1 & 2

[Stacy Ann]

Bonjour,

je reviens après 4 jours de coupure de connexion à internet... très pratique pour le business... >:-(

autant pour moi, je suis sous le thème "technology shop (black)" acheté sur la boutique officielle de PS...
http://addons.prestashop.com/fr/neutre/952-technology-shop-black.html

je ne suis donc peut être pas dans la bonne rubrique... désolée...

Si un modo peut déplacer mon sujet dans la rubrique adéquat...

Je ne préfère pas donner le lien de mon site... mais si il vous faut des fichiers dites le moi!

Cordialement.

Stacy Ann

[Vincent Decaux]

Il y a 2 solutions possibles.

La première est d'utiliser uniquement le CSS en définissant une image de fond d'une grand résolution (1920px de large), puis de la mettre en background du body et la positionner au milieu.

Comme sur ce site : http://cms.template-help.com/magento_30354/wedding/brushed-and-polished-tungsten-carbide-ring-8-0-mm.html/

Sinon, il faut créer une img dans le header.tpl par exemple, et lui attribuer comme propriétés CSS :

img#background {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}

en mettant un height:100% dans body aussi.
Ou ceci est possible en CSS 3 avec background-size:100%, mais incompatible IE8 du coup.

[Stacy Ann]

merci Vincent.

Alors j'ai déjà une image en background dans mon_theme/css/global.css... Donc il serait peut être plus simple de partir directement de là...?

voici le bout de code que j'ai, que dois-je faire pour avoir du 100%?

body {
   background-image: url('http://www.mon-site.com/mon-image.jpg'); 
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: black;
   text-align:center;
   margin:0;
   padding:0;
}

Merci d'avance.

Cordialement.

Stacy Ann