Bannière en Background + un deuxième fond
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Bannière en Background + un deuxième fond
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 :
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
Re: Bannière en Background + un deuxième fond
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
Ê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
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Bannière en Background + un deuxième fond
Bonjour à toi !
Premièrement, oui, en effet, je suis le fondateur de mon forum ! Pourrais-tu m'aider et me faire part de ce qu'il faudrait modifier et dans quel tenplate ?
Re: Bannière en Background + un deuxième fond
Bien sûr, c’est pour ça que je suis là
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 :
Juste avant celle-ci, ajoutez cette div :
Rendez-vous dans votre feuille de styles, où vous ajoutez ce code :
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.
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">
Juste avant celle-ci, ajoutez cette div :
- Code:
<div class="bannière_header"></div>
- Code:
<div class="bannière_header"></div>
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
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;}
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.
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Bannière en Background + un deuxième fond
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 :
Voici aussi mon CSS :
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%;}
Re: Bannière en Background + un deuxième fond
Il vous faut mettre les valeurs exactes de votre image. Pas en pourcents mais en pixels.
Exemple :
Exemple :
- Code:
height:520px;
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Bannière en Background + un deuxième fond
Merci, j'ai réussis !
Mais comment faire pour qu'elle prenne toute la largeur au juste ?
Mais comment faire pour qu'elle prenne toute la largeur au juste ?
Re: Bannière en Background + un deuxième fond
Ajoutez à votre CSS :
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
- 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
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Bannière en Background + un deuxième fond
Merci encore une fois.
C'est tout, j'espère compté sur toi dans un avenir qui sait, peut-être proche !
C'est tout, j'espère compté sur toi dans un avenir qui sait, peut-être proche !
Re: Bannière en Background + un deuxième fond
Mais de rien, ravie d’avoir pu vous venir en aide, et au plaisir de vous revoir prochainement, en effet
Bonne soirée
Bonne soirée
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Sujets similaires
» Position de la bannière et de la barre de navigation inversée + background
» background fond de forum
» Problème d'image de fond (background)
» Comment mettre une image en fond lorsque notre bannière est déjà le fond ?
» Bannière et Background du fofo, Police et Orientation des titres du menu accordéon
» background fond de forum
» Problème d'image de fond (background)
» Comment mettre une image en fond lorsque notre bannière est déjà le fond ?
» Bannière et Background du fofo, Police et Orientation des titres du menu accordéon
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum