Bannière en image de fond réduite

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Résolu Bannière en image de fond réduite

Message par rachellegreen7 Mar 26 Avr 2011 - 15:13

Bonjour,

J'ai suivis à la lettre (du moins je pense) ce Tuto pour pouvoir mettre ma bannière en image de fond.

Malheureusement, après maintes recherches et bidouillages, ma bannière est toujours réduite, elle ne fait pas la totalité du forum; alors qu'elle est large (1440*800).

La catastrophe en est là
J'ai remis le CSS comme dans le tuto (j'ai tenté d'autres astuces pour mettre une bannière en image de fond)
Code:
body {
background-repeat: no-repeat;
}

J'ai essayé de réduire la bannière en hauteur ou longueur, rien n'y fait.

Merci d'avance pour vos réponses (:


Dernière édition par rachellegreen7 le Mer 27 Avr 2011 - 14:53, édité 1 fois
rachellegreen7

rachellegreen7
*

Féminin
Messages : 34
Inscrit(e) le : 26/07/2006

http://graphicarts.forumgratuit.fr
rachellegreen7 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière en image de fond réduite

Message par Danux Mar 26 Avr 2011 - 15:28

Bonjour,

Votre image n'est juste pas assez grande pour recouvrir tout votre écran d'ordinateur.

Comme chaque utilisateur possède un ordinateur qui peut être différent (en largeur d'écran), je vous conseille de mettre votre image en répété horizontalement.

Comme ceci :
Code:
body {
background-repeat: repeat-x;
background-position: center top;
}

Ceci vous permet de répéter l'image et donner l'impression qu'elle fait toute la largeur de votre forum.

Cordialement.
Danux

Danux
****

Masculin
Messages : 329
Inscrit(e) le : 22/07/2009

https://forum.forumactif.com/forum
Danux a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière en image de fond réduite

Message par rachellegreen7 Mar 26 Avr 2011 - 15:38

Bonjour,

Merci de votre réponse,
ça résout le problème partiellement, parce que mon image est toujours réduite.
Quand on affiche l'image de fond seule, et qu'on regarde le forum on voit bien qu'elle est réduite, à la vue de la qualité.
Mon image fait 1440px de largeur tout comme la résolution de mon écran.

Cordialement.

rachellegreen7

rachellegreen7
*

Féminin
Messages : 34
Inscrit(e) le : 26/07/2006

http://graphicarts.forumgratuit.fr
rachellegreen7 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière en image de fond réduite

Message par Danux Mar 26 Avr 2011 - 17:28

Vous avez insérer le lien de votre image dans la gestion des images sur le panneau d'administration ?

Si oui, allez dans votre feuille CSS (là vous vous avez placé les 2 lignes de tout à l'heure), effacez-les et réécrivez à la place :

Code:
body { background-image: url('LIEN_DE_VOTRE_IMAGE') repeat-x center top; }
Danux

Danux
****

Masculin
Messages : 329
Inscrit(e) le : 22/07/2009

https://forum.forumactif.com/forum
Danux a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière en image de fond réduite

Message par rachellegreen7 Mar 26 Avr 2011 - 18:32

Oui je l'ai mis dans gestions des images.

Le bon code je pense que c'était plutôt ça, mais l'image est toujours plus petite qu'elle devrait l'être.
Code:
body { background-image: url('http://img6.imageshack.us/img6/8028/headeriu.png'); center-top;
background-repeat:repeat-x;  }}

Mais là en plus mon fond de page est devenu blanc, même si j'essaie de changer de couleur...


Dernière édition par rachellegreen7 le Mar 26 Avr 2011 - 18:35, édité 1 fois
rachellegreen7

rachellegreen7
*

Féminin
Messages : 34
Inscrit(e) le : 26/07/2006

http://graphicarts.forumgratuit.fr
rachellegreen7 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière en image de fond réduite

Message par EstoLouis Mar 26 Avr 2011 - 18:35

Ca te dirait de passer par les templates ??
avatar

EstoLouis
**

Masculin
Messages : 64
Inscrit(e) le : 05/07/2009

http://kef-coding.keuf.net
EstoLouis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière en image de fond réduite

Message par rachellegreen7 Mar 26 Avr 2011 - 18:36

Oui, pas de problème!
Tant que ça résout tout...
rachellegreen7

rachellegreen7
*

Féminin
Messages : 34
Inscrit(e) le : 26/07/2006

http://graphicarts.forumgratuit.fr
rachellegreen7 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière en image de fond réduite

Message par EstoLouis Mar 26 Avr 2011 - 18:43

Alors je vais tenter de t'expliquer Wink

Template > Général > overall_header
La modification a lieu dans cette zone là
Code:
{JAVASCRIPT}
  <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
        <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
              <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                    <!-- BEGIN switch_logo_center -->
                    <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                    <br />
                    <!-- END switch_logo_center -->
                    <div class="maintitle">{MAIN_SITENAME}</div>
                    <br />
                    <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
              </tr>
            </table>

Il faudrait rajouter le code suivant entre {JAVASCRIPT} et <table etc...>

Code:
<table class="entete" width="100%" height="300px" background="{LOGO}" cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td align="center" width="100%" height="300px">
  <a href="{U_INDEX}"><img src="http://img10.hostingpics.net/pics/808499Sanstitre1.png" alt="{L_INDEX}"/></a>
        </td>
      </tr>
  </table>

Ce code permet d'installer un background qui est en faite le logo que tu peux installer dans la gestion des images ( " {LOGO} " ) et installer une image transparente (tu devras choisir la hauteur toi meme en créant ton image transparente) de la hauteur du background (= bannière). Tu rajoute la variable "entete" qui te permetra de modifier l'emplacement du background via la Fiche de Style CSS. Tu peux alors mettre
Code:
.entete {
  background-position: center top;
  background-repeat: no-repeat;}

Cependant, si on laisse ce résultat, la bannière apparaitra deux fois. Je pense qu'il faut supprimer
Code:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
              <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                    <!-- BEGIN switch_logo_center -->
                    <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                    <br />
                    <!-- END switch_logo_center -->
                    <div class="maintitle">{MAIN_SITENAME}</div>
                    <br />
                    <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
              </tr>
            </table>

Voila Smile
J'ai eu le meme probleme il y a quelques temps x)
avatar

EstoLouis
**

Masculin
Messages : 64
Inscrit(e) le : 05/07/2009

http://kef-coding.keuf.net
EstoLouis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière en image de fond réduite

Message par Danux Mar 26 Avr 2011 - 18:51

rachellegreen7 a écrit:Oui je l'ai mis dans gestions des images.

Le bon code je pense que c'était plutôt ça, mais l'image est toujours plus petite qu'elle devrait l'être.
Code:
body { background-image: url('http://img6.imageshack.us/img6/8028/headeriu.png'); center-top;
background-repeat:repeat-x;  }}

Mais là en plus mon fond de page est devenu blanc, même si j'essaie de changer de couleur...

Attention, ton code là est faux.
Il y a des " ; " en trop dans le code, ce qui fausse tout.

Code:
body { background-image: url('http://img6.imageshack.us/img6/8028/headeriu.png') center-top;
background-repeat:repeat-x;  }}
Danux

Danux
****

Masculin
Messages : 329
Inscrit(e) le : 22/07/2009

https://forum.forumactif.com/forum
Danux a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière en image de fond réduite

Message par rachellegreen7 Mar 26 Avr 2011 - 23:04

Merci EstoLouis, j'ai suivi à la lettre ce que tu m'as proposé, mais ça n'a rien changé S:
rachellegreen7

rachellegreen7
*

Féminin
Messages : 34
Inscrit(e) le : 26/07/2006

http://graphicarts.forumgratuit.fr
rachellegreen7 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière en image de fond réduite

Message par EstoLouis Mer 27 Avr 2011 - 14:37

Excuse moi mais ton image fait bien cette taille la...
J'ai regardé ce lien : https://2img.net/r/ihimizer/img6/8028/headeriu.png
Agrandis ton image, mais ya aucun probleme de resolution ...
avatar

EstoLouis
**

Masculin
Messages : 64
Inscrit(e) le : 05/07/2009

http://kef-coding.keuf.net
EstoLouis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière en image de fond réduite

Message par rachellegreen7 Mer 27 Avr 2011 - 14:53

D'accord, c'est bon en fait cette fois le problème venait de moi. Tout va bien !
Merci beaucoup de ton aide :]
rachellegreen7

rachellegreen7
*

Féminin
Messages : 34
Inscrit(e) le : 26/07/2006

http://graphicarts.forumgratuit.fr
rachellegreen7 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum