Mettre une image de fond à un header de fond

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 le 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 : http://img4.hostingpics.net/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
****

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

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 le 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
+ Hyperactif +

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

http://fanasiacodes.bbfr.net/
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 le 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
****

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

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 le 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
+ Hyperactif +

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

http://fanasiacodes.bbfr.net/
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 le 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
****

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

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 le 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
+ Hyperactif +

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

http://fanasiacodes.bbfr.net/
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 le 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
****

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

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 le 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
+ Hyperactif +

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

http://fanasiacodes.bbfr.net/
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 le Dim 24 Juil 2011 - 23:43

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

Spoiler:
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 : 420px;
width : 1280px;
position : absolute;
}

#i_logo {
z-index: 999;
}

Le Template Overhall_Header :

Spoiler:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {
         var w_cont = $('#fa_ticker_container').width();

         if (w_cont > 0)
         {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des ?l?ments */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du contenur en fonction des ?l?ments et de la hauteur personnalis?e dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des ?l?ments et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">//<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         pm.focus();
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         report.focus();
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}"
text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<center><div class="entete"> </div></center>
<!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {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>

            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</body>
</html>
<!-- END html_validation -->

Enfin voici à quoi cela ressemble actuellement :

Spoiler:

silvia2
****

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

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 le Dim 24 Juil 2011 - 23:53

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

SoraNoHime
+ Hyperactif +

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

http://fanasiacodes.bbfr.net/
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 le Lun 25 Juil 2011 - 1:02

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

silvia2
****

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

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 le 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
+ Hyperactif +

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

http://fanasiacodes.bbfr.net/
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 le Lun 25 Juil 2011 - 1:21

Très bien.
Merci beaucoup I love you

silvia2
****

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

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 le 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
+ Hyperactif +

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

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 le 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
****

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

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 le 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
+ Hyperactif +

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

http://fanasiacodes.bbfr.net/
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 le 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
****

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

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 le 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
+ Hyperactif +

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

http://fanasiacodes.bbfr.net/
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 le 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
****

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

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 le 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
+ Hyperactif +

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

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 le 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
+ Hyperactif +

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

http://fanasiacodes.bbfr.net/
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 le Jeu 4 Aoû 2011 - 23:15

Bonjour,

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
+ Hyperactif +

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

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

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


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