Background Fixe ou Déplaçable

[Morgatte]

Hello,

J'ai un peu galèré pour trouver comment modifier mon Background Fixe ou bien Déplaçable donc je mets ma solution ici.
Ca pourra servir à d'autres en utilisant la fonction "Recherche" du forum

Toutes les images sur lesquelles pointer seront préalablement placées dans votre répertoire .../monTheme/img/



I - Background fixe :

Ouvrez Global.css et dans la balise body {} pointez la valeur de la ligne background: ... url (...) vers votre image, ex :

body {
   -moz-background-clip:border;
   -moz-background-inline-policy:continuous;
   -moz-background-origin:padding;
   background:#FFFFFF url(../img/fond.jpg) no-repeat fixed center center;
   background-color: white;
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #601060;
   text-align:center;
}

------------------------------------------------------------------------------------

II - Background déplaçable :

Le Background sera créé ainsi : (les 4 images devant être déposées dans ".../monTheme/img/"

+ Le Header:

- Une image de 1*50 pixels (par exemple) répétitive Pour former le bandeau du haut : FondImageHeader.jpg

- Une image de 200*50 pixels (par exemple) placée par dessus le bandeau du haut : ImageHeader.jpg


+ Le centre

- Aucune image, simplement un fond de même couleur que le dernier pixel du bas de FondImageHeader.jpg

+ Le Footer

- Une image de 1*50 pixels (par exemple) répétitive Pour former le bandeau du bas : FondImageFooter.jpg

- Une image de 200*50 pixels (par exemple) placée par dessus le bandeau du bas : ImageFooter.jpg





Ouvrir Global.css

Dans la balise body {} supprimer le lien ver l'image du background car celle-ci sert à un background fixe.
Dans la balise body {} mettre la couleur que vous souhaitez (celle du pixel du bas de l'image FondImageHeader.jpg
ex :

/* UNE IMAGE BACKGROUND unique et qui ne se déplace pas */

body {
   -moz-background-clip:border;
   -moz-background-inline-policy:continuous;
   -moz-background-origin:padding;
   background:#FFFFFF /* url(../img/fond.jpg) no-repeat fixed center center; */    A Modifier
   background-color: FFFFFF;                                A Modifier
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #601060;
   text-align:center;
}

A la fin de Global.css rajouter ceci :

#ImageFondHeader {
   -moz-background-clip:border;
   -moz-background-inline-policy:continuous;
   -moz-background-origin:padding;
   background: #FFFFFF url('../img/ImageFondHeader.jpg') repeat-x scroll 0 0; /* Couleur de fond au dessus */
   background-color: #FFFFFF;                                                       /* du bandeau du haut */
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #601060;
   text-align:center;
   magin-top: 0px;
   padding-top: 0px;  /* décale l'image Centrale du Header (ImageHeader.jpg) X pixels vers le bas par rapport au haut de la page */
   padding-bottom: 0px; /* décale le reste du contenu de la page X pixels sous l'image Centrale du Header (ImageHeader.jpg) */
}

#ImageFondFooter {
   -moz-background-clip: border;
   -moz-background-inline-policy: continuous;
   -moz-background-origin: padding;
   background: #84AD24 url('../img/ImageFondFooter.gif') repeat-x scroll center top;        /* Couleur de fond en dessous     */
   background-color: #84AD24;                                                                /* du bandeau du bas            */
   font-size: 11px;
   line-height: 1.2em;
   magin-top: 0px;
   padding-top: 0px;            /* déplace l'image centrale (ImageFooter.jpg) X pixels plus bas que le haut de le bandeau de fond (FondImageFooter.jpg) */
   padding-bottom: 0px;        /* rajoute X pixels libres entre l'image centrale du footer (ImageFooter.jpg) et la bas de la page */
}

Dans le fichier header.tpl rajouter ceci juste après <body....>

Dans le fichier footer.tpl rajouter ceci juste avant </body>

[iowa]

Bonjour, je viens de procéder à un essai avec ce que décris pour l'image fixe... mais cela ne fonctionne pas. Je suis encore trop novice pour déterminer où se situe l'erreur, tel quel il y a un os : où la syntaxe n'est pas conforme, ou il manque quelque chose à ajouter quelque part.

[iowa]

RE, je m'auto-répond! Le problème venait de la taille de l'image utilisée... rien à voir avec ton code.
toutes mes confuses pour avoir douté de ta contribution, d'excellente qualité, je tiens à le dire.

[benj0612]

Génial ce post ! MERCI !

Mon problème je l'ai réglé en changeant le "no-repeat" par "repeat" Car j'avais un élément que l'on peut multiplier a l'infini.

B'

[rastakouere]

ce poste date , mais merci ça marche du tonner

[Maury Girard]

Bonjour Morgatte

je viens rajouter une pierre à l'édifice

Cela ressemble plus à changement de fond aléatoire avec ou sans le rafraichissement d'une page web.Si cela peu être utile.

 

Il faut juste remplacer ce code dans votre header.tpl

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>

 

par ce code

<script type="text/javascript">

var fondListe=['1','2','3'];

document.write('<body class="fond' + fondListe[Math.floor(Math.random()*fondListe.length)] +'"{if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>');

</script>

 

-Puis ajouter le code css comme ceci dans le global.css

 

.fond1 { background: #ffffff url('../img/01.jpg') no-repeat scroll center top; }

 

.fond2 { background: #ffffff url('../img/02.jpg') no-repeat scroll center top; }

.fond3 { background: #ffffff url('../img/03.jpg') no-repeat scroll center top; }

 

 

Il faut évidement que vos images de fond soit dans le dossier \img\

qui ce trouve dans le dossier de votre Thème.

 

 

Cordialement,

[Perrau06]

Salut à tous!

Mille mercis pour ce tips de fixation de BG. Par contre, sur mobile, ça ne marche pas... Qualqu'un saurait il pourquoi et comment faire?

Merci à vous.