Mettre une image de fond à un header de fond

4 participants

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

En cours Mettre une image de fond à un header de fond

Message par silvia2 Dim 24 Juil 2011 - 22:46

Bonsoir Smile

Je rencontre actuellement un petit problème sur mon forum. J'ai installé un header de fond, et j'aimerais que le fond qui est actuellement en couleur puisse être remplacé par une image. Je ne sais pas si je suis assez explicite. Voici une image :

Spoiler:

Et ce fameux fond violet, j'aimerais le remplacer par cette image : https://2img.net/r/hpimg4/pics/639083FDKJJ.png
Voici ce que je souhaiterais obtenir :

Spoiler:

Et voici le code que j'ai mis dans mon CSS :

Code:
body{
background-color: #413D49 ;
background-image: url("http://img4.hostingpics.net/pics/150844FDKJJjnnnnnn.png");
background-position:top;
background-repeat:no-repeat;
}

Je vous remercie par avance et espère que vous pourrez m'aider I love you
silvia2

silvia2
****

Féminin
Messages : 248
Inscrit(e) le : 03/06/2007

http://www.throwndice.com/
silvia2 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre une image de fond à un header de fond

Message par SoraNoHime Dim 24 Juil 2011 - 22:56

bonsoir

dans le template Général Overall_header ; repérez ceci :

Code:
<body
 background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}"
text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<!-- BEGIN hitskin_preview -->

nous allons y ajouter une div qui contiendra votre logo :

Code:
<body
 background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}"
text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<div class="entete"> </div>
<!-- BEGIN hitskin_preview -->

puis dans votre css rajoutez :

/*image de fond*/
body {
background-image:url("adresse de votre fond");
background-position : top center;
}

/*image de logo*/
.entete {
background-image:url("adresse de votre logo");
background-repeat: no-repeat;
background-position: top center;
height : hauteur de votre imagepx;
width : largeur de votre imagepx;
position : absolute;
}

Cordialement.
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre une image de fond à un header de fond

Message par silvia2 Dim 24 Juil 2011 - 23:11

Tout d'abord merci beaucoup pour la rapidité de la réponse Smile
J'ai juste un problème : j'ai bien mis les url du logo et du fond à la bonne place, j'ai complété la hauteur et la largeur et j'ai modifié le template.
Pourtant, le logo n'apparait pas sur le forum. Il n'y a que le fond et l'image transparente qui apparaissent. J'avoue que je ne comprends pas Confused

Voici à quoi cela ressemble désormais :

Spoiler:

Le code que j'ai mis dans mon CSS est le suivant :

Code:
/*image de fond*/
body {
background-image:url("http://img4.hostingpics.net/pics/967115THEFONDAMETTRESURLEFORUM.jpg");
background-position : top center;
}

/*image de logo*/
.entete {
background-image:url("http://img4.hostingpics.net/pics/904922FDKJJjnnnnnn.png");
background-repeat: no-repeat;
background-position: top center;
height : 420;
width : 1280;
position : absolute;
}
silvia2

silvia2
****

Féminin
Messages : 248
Inscrit(e) le : 03/06/2007

http://www.throwndice.com/
silvia2 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre une image de fond à un header de fond

Message par SoraNoHime Dim 24 Juil 2011 - 23:17

Code:
<div class="entete"> </div>

avez-vous bien laissé l'espace entre <div class="entete"> et </div>
il est primordial.
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre une image de fond à un header de fond

Message par silvia2 Dim 24 Juil 2011 - 23:25

Autant pour moi, j'avais enlevé les "px" du code css, alors forcément ça ne pouvait pas marcher Laughing
Donc désormais cela apparait, mais pas centré. Ce qui est étrange car dans le code css la position est "top-center".
Aussi, le logo de fond apparait par dessus l'image transparente ce qui fait qu'on ne peut plus cliquer dessus.
silvia2

silvia2
****

Féminin
Messages : 248
Inscrit(e) le : 03/06/2007

http://www.throwndice.com/
silvia2 a été remercié(e) par l'auteur de ce sujet.
  • 0

En cours Re: Mettre une image de fond à un header de fond

Message par SoraNoHime Dim 24 Juil 2011 - 23:28

mettez ce code dans la css pour le logo transparent, afin qu'il passe au dessus :

Code:
#i_logo {
z-index : 999;
}

pour centrer si cela ne marche pas par la css, essayez en mettant
Code:
<center><div class="entete"> </div></center>
dans le template.
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre une image de fond à un header de fond

Message par silvia2 Dim 24 Juil 2011 - 23:33

C'est étrange car rien ne fonctionne.
Le logo transparent ne parvient pas à passer au dessus du logo de fond, et le logo de fond ne veut pas se centrer. Confused
silvia2

silvia2
****

Féminin
Messages : 248
Inscrit(e) le : 03/06/2007

http://www.throwndice.com/
silvia2 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre une image de fond à un header de fond

Message par SoraNoHime Dim 24 Juil 2011 - 23:35

Pyus-je avoir un lien vers un visuel, la css complète ainsi que votre template overall_header ?
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre une image de fond à un header de fond

Message par silvia2 Dim 24 Juil 2011 - 23:43

Le CSS (je viens de créer le forum donc il est peu rempli)

Spoiler:

Le Template Overhall_Header :

Spoiler:

Enfin voici à quoi cela ressemble actuellement :

Spoiler:
silvia2

silvia2
****

Féminin
Messages : 248
Inscrit(e) le : 03/06/2007

http://www.throwndice.com/
silvia2 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre une image de fond à un header de fond

Message par SoraNoHime Dim 24 Juil 2011 - 23:53

Donnez moi un lien s'il vous plait ? J'en ai besoin pour effectuer une analyse ^^
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre une image de fond à un header de fond

Message par silvia2 Lun 25 Juil 2011 - 1:02

Oh oui bien sur, désolée.
Voici le lien : LIEN DU FORUM
silvia2

silvia2
****

Féminin
Messages : 248
Inscrit(e) le : 03/06/2007

http://www.throwndice.com/
silvia2 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre une image de fond à un header de fond

Message par SoraNoHime Lun 25 Juil 2011 - 1:06

Ok, j'ai compris où est le problème. Je vais faire quelques tests. N'hésitez pas à upper votre sujet si besoin (une fois toutes les 24) en cas de besoin.
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre une image de fond à un header de fond

Message par silvia2 Lun 25 Juil 2011 - 1:21

Très bien.
Merci beaucoup I love you
silvia2

silvia2
****

Féminin
Messages : 248
Inscrit(e) le : 03/06/2007

http://www.throwndice.com/
silvia2 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre une image de fond à un header de fond

Message par tupac Lun 25 Juil 2011 - 1:39

Bonsoir

Si je peux me permettre j'ai une autre solution sans passer par les templates.

Placer les codes suivant dans votre feuille de style css vos images sont déjà a l'intérieur et pensez a retirer les codes précédemment placés.
Code:
body{
margin-top: 422px;
}

body{
background-image: url(http://img4.hostingpics.net/pics/150844FDKJJjnnnnnn.png), url(http://img4.hostingpics.net/pics/639083FDKJJ.png);
background-color: #413D49 ;
background-position: top center, bottom center;
background-repeat: no-repeat, repeat-y;
background-attachment: scroll, scroll;
}
tupac

tupac
Membre actif

Masculin
Messages : 2551
Inscrit(e) le : 13/10/2010

http://codactif.monalliance.com/
tupac a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre une image de fond à un header de fond

Message par silvia2 Lun 25 Juil 2011 - 14:52

Tout d'abord merci pour cette solution I love you
J'aime beaucoup l'effet donné, mais cela insère une marge de chaque côté du forum, centrant le fond et le logo au lieu de centrer le logo et étirer le fond comme je le souhaiterais. Rolling Eyes
silvia2

silvia2
****

Féminin
Messages : 248
Inscrit(e) le : 03/06/2007

http://www.throwndice.com/
silvia2 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre une image de fond à un header de fond

Message par SoraNoHime Lun 25 Juil 2011 - 14:57

Essayer de changer ceci :
Code:

<center><div class="entete"> </div></center>

en ceci :

Code:
 <center><div class="entete"><!-- 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></center>

je précise que l'image de votre logo, donc celle qui est transparente doit etre de la meme hauteur que celle de votre entete.
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre une image de fond à un header de fond

Message par silvia2 Lun 25 Juil 2011 - 15:08

Le logo transparent est enfin parvenu à passer au dessus du logo de fond Very Happy
Bon par contre le logo de fond ne veut décidément pas se centrer.
Le logo transparent est au dessus du logo de fond, donc il n'est lui non plus pas centré.
silvia2

silvia2
****

Féminin
Messages : 248
Inscrit(e) le : 03/06/2007

http://www.throwndice.com/
silvia2 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre une image de fond à un header de fond

Message par SoraNoHime Lun 25 Juil 2011 - 15:15

essayons en forçant par la css :



Code:

/*image de logo*/
.entete {
background-image:url("http://img4.hostingpics.net/pics/904922FDKJJjnnnnnn.png");
background-repeat: no-repeat;
background-position: top center;
height : 420;
width : 1280;
position : absolute;
}

à remplacer par :

Code:

/*image de logo*/
.entete {
background-image:url("http://img4.hostingpics.net/pics/904922FDKJJjnnnnnn.png");
background-repeat: no-repeat;
background-position: top center;
height : 420;
width : 1280;
position : relative;
top:-10px;
left : -10px;
}

modifier le top : -10px et left -10px; pour obtenir le centrage
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre une image de fond à un header de fond

Message par silvia2 Lun 25 Juil 2011 - 15:35

C'est super ! Le logo de fond est enfin centré avec le logo transparent.
Seul petit problème maintenant, il y a une grande marge entre le logo et le corps du forum.

Spoiler:
silvia2

silvia2
****

Féminin
Messages : 248
Inscrit(e) le : 03/06/2007

http://www.throwndice.com/
silvia2 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre une image de fond à un header de fond

Message par tupac Mar 26 Juil 2011 - 7:59

Bonjour

Pour qu'il n'y ai pas de marge de chaque côté il fallait tout simplement élargir l'image de fond ce qui est chose faite.

Code:
body{
  margin-top: 422px;
}

body{
  background-image: url(http://img4.hostingpics.net/pics/150844FDKJJjnnnnnn.png), url(http://hariboow.free.fr/upload/images/zepop.png);
  background-color: #413D49 ;
  background-position: top center, bottom center;
  background-repeat: no-repeat, repeat-y;
  background-attachment: scroll, scroll;
}
tupac

tupac
Membre actif

Masculin
Messages : 2551
Inscrit(e) le : 13/10/2010

http://codactif.monalliance.com/
tupac a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre une image de fond à un header de fond

Message par SoraNoHime Mer 27 Juil 2011 - 8:35

Essayez ceci : repérer dans votre template :

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>

et remplacez le par :

Code:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
              <tr>
                  <td align="center" width="100%" valign="middle">
                      <div class="maintitle">{MAIN_SITENAME}</div>
                    <br />
                    <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  </tr>
            </table>
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre une image de fond à un header de fond

Message par Anzu Jeu 4 Aoû 2011 - 23:15

Mettre une image de fond à un header de fond 24-emp10Bonjour,

Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 10 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou à faire un UP régulièrement ! Wink

Ce sujet est corbeillé, merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum.

A bientôt sur ForumActif Smile
Anzu

Anzu
Membre actif

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

https://forum.forumactif.com/
Anzu 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