Bannière en Background + un deuxième fond

2 participants

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

Résolu Bannière en Background + un deuxième fond

Message par Sakeb Jeu 22 Mar 2012 - 2:53

Salutation à tous,
Je me nomme ***** et je suis âgé de 13 ans. Je me suis lancé il y a peu de temps sur un projet, crée un forum se rapportant au célèbre jeux-vidéo faisant fureur, c'est-à-dire Assassin's Creed 3. Je vais pas vous le cacher, je suis un graphiste merdique mais bon, pourquoi pas me suis-je dis. Bref, rentrons dans les détails.

C'est alors que j'ai commencé à élaborer mon plan. Je désirais comme bannière une bannière large, j'ai donc décidé d'opter pour le background. Mais voilà, Une fois ma bannière installé en background, je voulais rajouter un petit fond sympa histoire de décorer le tout. Mais bon, puisque j'ai déjà utilisé mon background pour pouvoir mettre ma bannière de façon à ce qu'elle prenne toute la largeur du navigateur web, je ne sais plus comment procédé et s'il existe un moyen par dessus tout. Je viens donc sur ce forum implorer votre aide pour savoir s'il existe une façon de rajouter un deuxième background pour le fond de mon premier background en (bannière). Voici quelque lien :

Plan : https://i.servimg.com/u/f46/13/46/42/24/numari10.jpg
Bannière : https://i.servimg.com/u/f46/13/46/42/24/ascthr10.jpg
CSS :
Code:
body {
      background-repeat: no-repeat;
      background-position: center top;}

Ps : Si possible, j'aimerais aussi un petit conseil, j'essaye de positionner ma bannière de manière à ce qu'elle soit de toute largeur sur tout les écrans, autant bien sur un 1220*1000 qu'un 850*960 par exemple, donc si vous avez une idée en CSS comment, n'hésitez pas à m'aider.

Merci d'avoir pris soins de lire et merci d'avance.


Dernière édition par Sakeb le Ven 23 Mar 2012 - 0:18, édité 1 fois
avatar

Sakeb
Nouveau membre

Messages : 19
Inscrit(e) le : 12/07/2011

http://ascthree.forumpro.fr/
Sakeb a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière en Background + un deuxième fond

Message par Matriochka Jeu 22 Mar 2012 - 14:07

Bonjour,

Êtes-vous fondateur de votre forum ? Si oui, alors il va falloir que passiez par les templates afin de modifier une petite chose au niveau de la structure générale de votre forum Smile
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Bannière en Background + un deuxième fond

Message par Sakeb Jeu 22 Mar 2012 - 21:52


Bonjour à toi Smile !

Premièrement, oui, en effet, je suis le fondateur de mon forum Surprised ! Pourrais-tu m'aider et me faire part de ce qu'il faudrait modifier et dans quel tenplate Surprised ?
avatar

Sakeb
Nouveau membre

Messages : 19
Inscrit(e) le : 12/07/2011

http://ascthree.forumpro.fr/
Sakeb a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière en Background + un deuxième fond

Message par Matriochka Jeu 22 Mar 2012 - 22:07

Bien sûr, c’est pour ça que je suis là Razz

Donc, il va falloir que vous alliez dans le template overall_header et que vous cherchiez (aidez-vous de la recherche implantée ou bien de CTRL+F) la ligne suivante :
Code:
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
C’est celle qui débute le corps de votre forum.

Juste avant celle-ci, ajoutez cette div :
Code:
<div class="bannière_header"></div>
Sans la remplir. Celle-ci vous permettra de placer votre bannière de fond par la suite, avec un peu de CSS. Une fois ceci fait, ce qui devrait vous donner ceci :
Code:
<div class="bannière_header"></div>

<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
Enregistrez puis publiez le template, afin que la modification soit prise en compte.

Rendez-vous dans votre feuille de styles, où vous ajoutez ce code :
Code:
.bannière_header {
background-image:url("URL DE VOTRE IMAGE");
background-position:top center;
background-repeat:no-repeat;
height:HAUTEURpx;
width:LARGEURpx;}
Tout en laissant celui prévu pour body.

Avec ça, vous devrier être capable d’avoir une bannière de fond sur votre page ET un fond pour votre forum.

N’hésitez pas à me dire si les codes clochent, j’ai peut-être fait des erreurs, je n’ai pas testé au préalable. Mais ça devrait aller.
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Bannière en Background + un deuxième fond

Message par Sakeb Jeu 22 Mar 2012 - 23:48

Merci d'avoir essayé, malheureusement, ça n'a pas marché :/ !
Voici le rendu via mon forum test : http://ascthree.forumpro.fr/

Je te passe ma template :
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 elements */
            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 conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des elements 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}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://2img.net/i/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}

           <div class="banniere_header"></div>
       
        <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 -->

Voici aussi mon CSS :
Code:
.banniere_header {
        background-image:url("http://img15.hostingpics.net/pics/992984ascthreeban.png");
        background-position:top center;
        background-repeat:no-repeat;
        height:100%;
        width:100%;}
C'est tout, j'espère trouver une solution. Very Happy
avatar

Sakeb
Nouveau membre

Messages : 19
Inscrit(e) le : 12/07/2011

http://ascthree.forumpro.fr/
Sakeb a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière en Background + un deuxième fond

Message par Matriochka Jeu 22 Mar 2012 - 23:52

Il vous faut mettre les valeurs exactes de votre image. Pas en pourcents mais en pixels.

Exemple :
Code:
height:520px;
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Bannière en Background + un deuxième fond

Message par Sakeb Ven 23 Mar 2012 - 0:00

Merci, j'ai réussis Surprised !
Mais comment faire pour qu'elle prenne toute la largeur au juste ?
avatar

Sakeb
Nouveau membre

Messages : 19
Inscrit(e) le : 12/07/2011

http://ascthree.forumpro.fr/
Sakeb a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière en Background + un deuxième fond

Message par Matriochka Ven 23 Mar 2012 - 0:06

Ajoutez à votre CSS :
Code:
body {margin:0px;}

Par contre, si j’étais vous, je retirerai la largeur (width), car votre image est bien trop grande et cela risque de déformer le forum pour les personnes qui ont une petite résolution d’écran. Retirez cette ligne, la largeur se mettre automatiquement quoi qu’il arrive Smile
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Bannière en Background + un deuxième fond

Message par Sakeb Ven 23 Mar 2012 - 0:17

Merci encore une fois. Razz
C'est tout, j'espère compté sur toi dans un avenir qui sait, peut-être proche Very Happy !
avatar

Sakeb
Nouveau membre

Messages : 19
Inscrit(e) le : 12/07/2011

http://ascthree.forumpro.fr/
Sakeb a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière en Background + un deuxième fond

Message par Matriochka Ven 23 Mar 2012 - 0:19

Mais de rien, ravie d’avoir pu vous venir en aide, et au plaisir de vous revoir prochainement, en effet Very Happy

Bonne soirée
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka 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