Accueil
Créer un forumMettre une image de fond à un header de fond
4 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
Mettre une image de fond à un header de fond
par silvia2 Dim 24 Juil 2011 - 22:46
Bonsoir 
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 :
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 :
Et voici le code que j'ai mis dans mon CSS :
Je vous remercie par avance et espère que vous pourrez m'aider
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
silvia2- ****
-
Messages : 248
Inscrit(e) le : 03/06/2007 -
Re: Mettre une image de fond à un header de fond
par SoraNoHime Dim 24 Juil 2011 - 22:56
bonsoir
dans le template Général Overall_header ; repérez ceci :
nous allons y ajouter une div qui contiendra votre logo :
puis dans votre css rajoutez :
Cordialement.
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- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Mettre une image de fond à un header de fond
par silvia2 Dim 24 Juil 2011 - 23:11
Tout d'abord merci beaucoup pour la rapidité de la réponse
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
Voici à quoi cela ressemble désormais :
Le code que j'ai mis dans mon CSS est le suivant :
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
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- ****
-
Messages : 248
Inscrit(e) le : 03/06/2007 -
Re: Mettre une image de fond à un header de fond
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- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Mettre une image de fond à un header de fond
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 
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.
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- ****
-
Messages : 248
Inscrit(e) le : 03/06/2007 -
Re: Mettre une image de fond à un header de fond
par SoraNoHime Dim 24 Juil 2011 - 23:28
mettez ce code dans la css pour le logo transparent, afin qu'il passe au dessus :
pour centrer si cela ne marche pas par la css, essayez en mettant
- 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>
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Mettre une image de fond à un header de fond
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.
Le logo transparent ne parvient pas à passer au dessus du logo de fond, et le logo de fond ne veut pas se centrer.
silvia2- ****
-
Messages : 248
Inscrit(e) le : 03/06/2007 -
Re: Mettre une image de fond à un header de fond
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- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Mettre une image de fond à un header de fond
par silvia2 Dim 24 Juil 2011 - 23:43
Le CSS (je viens de créer le forum donc il est peu rempli)
Le Template Overhall_Header :
Enfin voici à quoi cela ressemble actuellement :
- 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://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}
<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- ****
-
Messages : 248
Inscrit(e) le : 03/06/2007 -
Re: Mettre une image de fond à un header de fond
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- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Mettre une image de fond à un header de fond
par silvia2 Lun 25 Juil 2011 - 1:02
Oh oui bien sur, désolée.
Voici le lien : LIEN DU FORUM
Voici le lien : LIEN DU FORUM
silvia2- ****
-
Messages : 248
Inscrit(e) le : 03/06/2007 -
Re: Mettre une image de fond à un header de fond
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- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Mettre une image de fond à un header de fond
par silvia2 Lun 25 Juil 2011 - 1:21
Très bien.
Merci beaucoup
Merci beaucoup
silvia2- ****
-
Messages : 248
Inscrit(e) le : 03/06/2007 -
Re: Mettre une image de fond à un header de fond
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.
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- Membre actif
-
Messages : 2551
Inscrit(e) le : 13/10/2010 -
Re: Mettre une image de fond à un header de fond
par silvia2 Lun 25 Juil 2011 - 14:52
Tout d'abord merci pour cette solution
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.
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.
silvia2- ****
-
Messages : 248
Inscrit(e) le : 03/06/2007 -
Re: Mettre une image de fond à un header de fond
par SoraNoHime Lun 25 Juil 2011 - 14:57
Essayer de changer ceci :
en ceci :
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.
- 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- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Mettre une image de fond à un header de fond
par silvia2 Lun 25 Juil 2011 - 15:08
Le logo transparent est enfin parvenu à passer au dessus du logo de fond 
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é.
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- ****
-
Messages : 248
Inscrit(e) le : 03/06/2007 -
Re: Mettre une image de fond à un header de fond
par SoraNoHime Lun 25 Juil 2011 - 15:15
essayons en forçant par la css :
à remplacer par :
modifier le top : -10px et left -10px; pour obtenir le centrage
- 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- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Mettre une image de fond à un header de fond
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.
Seul petit problème maintenant, il y a une grande marge entre le logo et le corps du forum.
- Spoiler:
silvia2- ****
-
Messages : 248
Inscrit(e) le : 03/06/2007 -
Re: Mettre une image de fond à un header de fond
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.
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- Membre actif
-
Messages : 2551
Inscrit(e) le : 13/10/2010 -
Re: Mettre une image de fond à un header de fond
par SoraNoHime Mer 27 Juil 2011 - 8:35
Essayez ceci : repérer dans votre template :
et remplacez le par :
- 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- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Mettre une image de fond à un header de fond
par Anzu 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 !  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 |
Anzu- Membre actif
-
Messages : 20685
Inscrit(e) le : 30/08/2007 -
Sujets similaires» mettre le header en fond
» Fond image du Header qui se répète
» problème image transparente / header de fond
» AwesomeBB : Mettre l'image du logo au header
» Comment mettre une image en fond lorsque notre bannière est déjà le fond ?
» Fond image du Header qui se répète
» problème image transparente / header de fond
» AwesomeBB : Mettre l'image du logo au header
» Comment mettre une image en fond lorsque notre bannière est déjà le fond ?
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