Jump to content

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>




Link to comment
Share on other sites

  • 2 weeks later...

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.

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

Link to comment
Share on other sites

  • 1 month later...
  • 1 year later...

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,

Link to comment
Share on other sites

  • 9 years 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
×
×
  • Create New...