Jump to content
Sign in to follow this  
Morgatte

Background Fixe ou Déplaçable

Recommended Posts

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>




Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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'

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
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
Sign in to follow this  

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More