It is currently Mon 26 Sep 2016 - 21:00 - créer un forum

[Tuto] Installer une image de fond

Skip to content

Post new topic Reply to topic Goto page: <  1, 2, 3260, 261, 262266, 267, 268  >

[Tuto] Installer une image de fond
Author Message
bidouille33


Joined: 11 Aug 2010
Posts: 117

PostPosted: Thu 7 Jun 2012 - 05:51    Post subject: [Tuto] Installer une image de fond Reply with quote

PublicitéSupprimer les publicités ?
Previous post review:

bonjour.
rechercher dans le template CSS au nom de votre thème, vous devriez y trouver:
Code: Sélectionner - Agrandir
/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
   background-image: url('http://img2.xooimage.com/files/f/o/fond-33799.gif');
   background-color: #228593;
   scrollbar-face-color: #228593;
   scrollbar-highlight-color: #228593;
   scrollbar-shadow-color: #228593;
   scrollbar-3dlight-color: #228593;
   scrollbar-arrow-color:  #000000;
   scrollbar-track-color: #000000;
   scrollbar-darkshadow-color: #228593;


modifier l'adresse de l'image. servez vous du tuto pour fixer, centrer, etc.....
votre image me semble ne pas être à la bonne largeur.
voyez ce tuto aussi: http://xooit.xooit.com/t36944-Auto-Redimension-de-l-image-de-fond-selon-la-…

cordialement.
Forum
Author Message
Babiroussa
Membre


Offline
Membre

Joined: 06 Jun 2012
Posts: 2
Point(s): 2
Moyenne: 1.00
Mac Safari Masculin Verseau (20jan-19fev) 馬 Cheval

PostPosted: Thu 7 Jun 2012 - 14:15    Post subject: [Tuto] Installer une image de fond Reply with quote

Un tout grand merci Bidouille!!!


Ça fonctionne  Very Happy


Forum
Author Message
Edward Dumbledore
Membre


Offline
Membre

Joined: 30 Jul 2009
Posts: 8
Niveau:
Point(s): 8
Moyenne: 1.00
Windows Vista ou 7 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Capricorne (22déc-19jan) 鼠 Rat

PostPosted: Fri 8 Jun 2012 - 18:38    Post subject: [Tuto] Installer une image de fond Reply with quote

Bonjour.
Moi j'ai le thème Dfgwar (mon forum est ici).
Mais je ne peux changer seulement la couleur du fond d'écran (noir) dans la template "dgfwarcraft.css". Donc je suppose qu'on ne peut pas mettre d'image en fond d'écran ? Sad

Merci pour une éventuelle réponse.

EDIT : C'est bon, j'ai réussis ! Very Happy


Forum
Author Message
Spawn725
Membre


Offline
Membre

Joined: 10 Jun 2012
Posts: 1
Point(s): 1
Moyenne: 1.00

PostPosted: Sun 10 Jun 2012 - 20:18    Post subject: [Tuto] Installer une image de fond Reply with quote

Bonjours quand je vais dans overall_header.tpl
voila ce que je trouve :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="{S_CONTENT_DIRECTION}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}">
<meta http-equiv="Content-Style-Type" content="text/css">
{META}
{NAV_LINKS}
<title>{SITENAME} :: {PAGE_TITLE}</title>
<script language="javascript" src="http://img.xooimage.com/files3/s/c/script-908b2.js">
</script>
<link rel="stylesheet" href="http://img.xooimage.com/files9/a/9/a/pluminator-354aadc.css" type="text/css"> 


<!-- BEGIN switch_enable_pm_popup -->
<script language="Javascript" type="text/javascript">
<!--
if ( {PRIVATE_MESSAGE_NEW_FLAG} )
{
window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
}
//-->
</script>
<!-- END switch_enable_pm_popup -->
</head>
<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">


<a name="top">[/url]


<table width="90%" cellspacing="0" cellpadding="10" border="0" align="center"> 
<tr> 
<td class="bodyline"><table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr> 
<td align="center">
</td>

</tr> 
<tr> 




<td align="center" width="100%" valign="middle"><span class="maintitle">{SITENAME}</span>
<span class="gen">{SITE_DESCRIPTION}
&nbsp; </span> 

<table cellspacing="0" cellpadding="2" border="0">
<tr> 
<td align="center" valign="top" nowrap="nowrap">
<!-- BEGIN switch_user_logged_in -->
<span class="mainmenu">
</span></td> 

<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<span class="mainmenu">
</span>



<!-- END switch_user_logged_out -->
</span></td>
</tr>

</table></td>
</tr>
</table>





Et je ne trouve pas : 
/* General page style. The scroll bar colours only visible in IE5.5+ */ 
body { 
   background-image: url('http://img.xooimage.com/files2/f/o/fond-33799.gif'); 
   background-color: #228593; 
   scrollbar-face-color: #228593; 
   scrollbar-highlight-color: #228593; 
   scrollbar-shadow-color: #228593; 
   scrollbar-3dlight-color: #228593; 
   scrollbar-arrow-color:  #000000; 
   scrollbar-track-color: #000000; 
   scrollbar-darkshadow-color: #228593;
Pour changer l'image de fond.


Comment faire  ? je me trompe de template ?


Forum
Author Message
Edward Dumbledore
Membre


Offline
Membre

Joined: 30 Jul 2009
Posts: 8
Niveau:
Point(s): 8
Moyenne: 1.00
Windows Vista ou 7 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Capricorne (22déc-19jan) 鼠 Rat

PostPosted: Sun 10 Jun 2012 - 20:30    Post subject: [Tuto] Installer une image de fond Reply with quote

Va plutôt dans la template ".css" (la première) Wink

Forum
Author Message
Samoht
Membre


Offline
Membre

Joined: 10 Jun 2012
Posts: 2
Niveau:
Point(s): 2
Moyenne: 1.00
Windows Vista ou 7 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

PostPosted: Tue 12 Jun 2012 - 13:25    Post subject: [Tuto] Installer une image de fond Reply with quote

Bonjour à tous!

Bon j'ai aussi essayé ce tuto mais sans succès...

J'ai essayé diverses méthodes, y compris l'auto-redimension de l'image mais rien n'y fait, le fond ne couvre pas toute la surface de la page.

Mon forum : http://alpha.vraiforum.com/index.php

Mon image de fond : http://imageshack.us/photo/my-images/513/fondfiniutilitaire2.jpg/

Copie du template onyx.css :


Code: Sélectionner - Agrandir
/*
  onyx Theme for phpBB version 2+
   Created by larme d'ange
   [url=http://lda-creation.conceptbb.com]http://lda-creation.conceptbb.com[/url]
 */
 
 
 
 
  /* General page style. The scroll bar colours only visible in IE5.5+ */
 body {
    background-color: #E5E5E5;
    scrollbar-face-color: #DEE3E7;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-shadow-color: #DEE3E7;
    scrollbar-3dlight-color: #D1D7DC;
    scrollbar-arrow-color:  #006699;
    scrollbar-track-color: #EFEFEF;
    scrollbar-darkshadow-color: #98AAB1;
 }
 
 
 /* General font families for common tags */
 font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif }
 a:link,a:active,a:visited { color : #006699; }
 a:hover      { text-decoration: none; color : #DD6900; }
 hr   { height: 0px; border: solid #D1D7DC 0px; border-top-width: 1px;}
 
 
 
 
 /* This is the border line & background colour round the entire page */
 .bodyline   { background-color: #FFFFFF; border: 1px #98AAB1 solid; }
 
 
 /* This is the outline round the main forum tables */
 .forumline   { background-color: #FFFFFF; border: 2px #006699 solid; }
 
 
 
 
 /* Main table cell colours and backgrounds */
 td.row1   { background-color: #EFEFEF; }
 td.row2   { background-color: #DEE3E7; }
 td.row3   { background-color: #D1D7DC; }
 
 
 
 
 /*
   This is for the table cell above the Topics, Post & Last posts on the index.php page
   By default this is the fading out gradiated silver background.
   However, you could replace this with a bitmap specific for each forum
 */
 td.rowpic {
       background-color: #FFFFFF;
       background-image: url('http://img6.xooimage.com/files/b/a/back_catd-758c2.gif');
       background-repeat: repeat-y;
 }
 
 
 /* Header cells - the blue and silver gradient backgrounds */
 th   {
    color: #FFA34F; font-size: 11px; font-weight : bold;
    background-color: #006699; height: 25px;
    background-image: url('http://img9.xooimage.com/files/b/a/back_title-758bb.jpg');
 }
 
 
 td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
          background-image: url('http://img6.xooimage.com/files/b/a/back_catg-758be.jpg');
          background-color:#D1D7DC; border: #FFFFFF; border-style: solid; height: 28px;
 }
 
 
 
 
 /*
   Setting additional nice inner borders for the main table cells.
   The names indicate which sides the border will be on.
   Don't worry if you don't understand this, just ignore it :-)
 */
 td.cat,td.catHead,td.catBottom {
    height: 29px;
    border-width: 0px 0px 0px 0px;
 }
 th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
    font-weight: bold; border: #FFFFFF; border-style: solid; height: 28px; }
 td.row3Right,td.spaceRow {
    background-color: #D1D7DC; border: #FFFFFF; border-style: solid; }
 
 
 th.thHead,td.catHead { font-size: 12px; border-width: 1px 1px 0px 1px; }
 th.thSides,td.catSides,td.spaceRow    { border-width: 0px 1px 0px 1px; }
 th.thRight,td.catRight,td.row3Right    { border-width: 0px 1px 0px 0px; }
 th.thLeft,td.catLeft     { border-width: 0px 0px 0px 1px; }
 th.thBottom,td.catBottom  { border-width: 0px 1px 1px 1px; }
 th.thTop    { border-width: 1px 0px 0px 0px; }
 th.thCornerL { border-width: 1px 0px 0px 1px; }
 th.thCornerR { border-width: 1px 1px 0px 0px; }
 
 
 
 
 /* The largest text used in the index page title and toptic title etc. */
 .maintitle,h1,h2   {
          font-weight: bold; font-size: 22px; font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
          text-decoration: none; line-height : 120%; color : #000000;
 }
 
 
 
 
 /* General text */
 .gen { font-size : 12px; }
 .genmed { font-size : 11px; }
 .gensmall { font-size : 10px; }
 .gen,.genmed,.gensmall { color : #000000; }
 a.gen,a.genmed,a.gensmall { color: #006699; text-decoration: none; }
 a.gen:hover,a.genmed:hover,a.gensmall:hover   { color: #DD6900; text-decoration: none; }
 
 
 
 
 /* The register, login, search etc links at the top of the page */
 .mainmenu      { font-size : 11px; color : #000000 }
 a.mainmenu      { text-decoration: none; color : #006699;  }
 a.mainmenu:hover{ text-decoration: none; color : #DD6900; }
 
 
 
 
 /* Forum category titles */
 .cattitle      { font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #006699}
 a.cattitle      { text-decoration: none; color : #006699; }
 a.cattitle:hover{ text-decoration: none; }
 
 
 
 
 /* Forum title: Text and link to the forums used in: index.php */
 .forumlink      { font-weight: bold; font-size: 12px; color : #006699; }
 a.forumlink    { text-decoration: none; color : #006699; }
 a.forumlink:hover{ text-decoration: none; color : #DD6900; }
 
 
 
 
 /* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
 .nav         { font-weight: bold; font-size: 11px; color : #000000;}
 a.nav         { text-decoration: none; color : #006699; }
 a.nav:hover      { text-decoration: none; }
 
 
 
 
 /* titles for the topics: could specify viewed link colour too */
 .topictitle         { font-weight: bold; font-size: 11px; color : #000000; }
 a.topictitle:link   { text-decoration: none; color : #006699; }
 a.topictitle:visited { text-decoration: none; color : #5493B4; }
 a.topictitle:hover   { text-decoration: none; color : #DD6900; }
 
 
 
 
 /* Name of poster in viewmsg.php and viewtopic.php and other places */
 .name         { font-size : 11px; color : #000000;}
 
 
 /* Location, number of posts, post date etc */
 .postdetails      { font-size : 10px; color : #000000; }
 
 
 
 
 /* The content of the posts (body of text) */
 .postbody { font-size : 12px;}
 a.postlink:link   { text-decoration: none; color : #006699 }
 a.postlink:visited { text-decoration: none; color : #5493B4; }
 a.postlink:hover { text-decoration: none; color : #DD6900}
 
 
 
 
 /* Quote & Code blocks */
 .code {
    font-family: Courier, 'Courier New', sans-serif; font-size: 11px; color: #006600;
    background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
    border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
 }
 
 
 .quote {
    font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #444444; line-height: 125%;
    background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
    border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
 }
 
 
 
 
 /* Copyright and bottom info */
 .copyright      { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #444444; letter-spacing: -1px;}
 a.copyright      { color: #444444; text-decoration: none;}
 a.copyright:hover { color: #000000; text-decoration: none;}
 
 
 
 
 /* Form elements */
 input,textarea, select {
    color : #000000;
    font: normal 11px Verdana, Arial, Helvetica, sans-serif;
    border-color : #000000;
 }
 
 
 /* The text input fields background colour */
 input.post, textarea.post, select {
    background-color : #FFFFFF;
 }
 
 
 input { text-indent : 2px; }
 
 
 /* The buttons used for bbCode styling in message post */
 input.button {
    background-color : #EFEFEF;
    color : #000000;
    font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
 }
 
 
 /* The main submit button option */
 input.mainoption {
    background-color : #FAFAFA;
    font-weight : bold;
 }
 
 
 /* None-bold submit button */
 input.liteoption {
    background-color : #FAFAFA;
    font-weight : normal;
 }
 
 
 /* This is the line in the posting page which shows the rollover
   help line. This is actually a text box, but if set to be the same
   colour as the background no one will know ;)
 */
 .helpline { background-color: #DEE3E7; border-style: none; }
 
 
 
 
 /* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
 @import url('http://img10.xooimage.com/files/f/o/formie-30d7c.css');



D'avance merci! C'est tout bête mais ça prend la tête!

<Merci d'utiliser la balise CODE la prochaine fois.>



Forum
Author Message
bidouille33
Membre


Offline
Membre

Joined: 11 Aug 2010
Posts: 117
Point(s): 117
Moyenne: 1.00
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Poissons (20fev-20mar) 龍 Dragon

PostPosted: Tue 12 Jun 2012 - 15:45    Post subject: [Tuto] Installer une image de fond Reply with quote

bonjour.

un autre tuto est disponible: http://xooit.xooit.com/t36944-Auto-Redimension-de-l-image-de-fond-selon-la-…

cordialement.


Forum
Author Message
Samoht
Membre


Offline
Membre

Joined: 10 Jun 2012
Posts: 2
Niveau:
Point(s): 2
Moyenne: 1.00
Windows Vista ou 7 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

PostPosted: Tue 12 Jun 2012 - 15:54    Post subject: [Tuto] Installer une image de fond Reply with quote

Oui merci, mais j'ai également essayé avec celui-ci, c'est de ça dont je parle dans mon premier message.

J'te jure j'suis à bout là... en plus y'en aurait pas pour longtemps à coder... ARGH! Mad

PS : pardon pour la balise, j'me tromperai pas la prochaine fois Okay


Forum
Author Message
Spoke59
Membre


Offline
Membre

Joined: 23 Jun 2012
Posts: 1
Niveau:
Point(s): 1
Moyenne: 1.00
Windows Vista ou 7 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Scorpion (23oct-21nov) 狗 Chien

PostPosted: Sun 8 Jul 2012 - 11:54    Post subject: [Tuto] Installer une image de fond Reply with quote

bonjour je suis sur le thème saphic j'ai fait les bonnes modification mais le fond d’écran reste en haut puis le fond et blanc...

Code: Sélectionner - Agrandir
 /*
  Created by Sopel
  http://www.stylerbb.net/
*/

body {
    margin: 0px; 0px; 0px; 0px;
    background-color: #FFFFFF ;
    background-image: url('http://img7.xooimage.com/files/4/9/0/wallpaper-700270-30dec7f.jpg');
    background-repeat: repeat-y;
        background-attachment: fixed;
    scrollbar-face-color: #DEE3E7;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-shadow-color: #DEE3E7;
    scrollbar-3dlight-color: #C7C3AE;
    scrollbar-arrow-color:  #006699;
    scrollbar-track-color: #EFEFEF;
    scrollbar-darkshadow-color: #98AAB1;
}

font,th,td,p {  font-family: Verdana, Arial, Helvetica, sans-serif;  }
a:link,a:active,a:visited { text-decoration: none; color : #4F4F4F; }
a:hover        { color : #A1BA23; }
hr    { height: 0px; border: solid #D1D7DC 0px; border-top-width: 1px;}

input,textarea, select { color : #4F4F4F; font: normal 11px Verdana, Arial, Helvetica, sans-serif; border-color : #000000; }
input.post, textarea.post, select { background-color : #FFFFFF; }
input { text-indent : 2px; }
input.button { background-color : #EFEFEF; color : #000000; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; }
input.mainoption { background-color : #FAFAFA; font-weight : bold; }
input.liteoption { background-color : #FAFAFA; font-weight : normal; }

.bodyline    { background-color: #F7F7F7; border: 1px #BFBFBF solid;  }
.forumline    { background-color: #DFDFDF; }

th    { color: #EEEEEE; font-size: 10px; font-weight : bold; background-image: url('http://img4.xooimage.com/files/a/6/8/llllllllllllllllll-18a5fc8.gif'); height: 25px; }
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR { font-weight: bold; border: #DFDFDF; border-style: solid; height: 28px; }
th.thHead,td.catHead { font-size: 12px; border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow     { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right     { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft      { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom  { border-width: 0px 1px 1px 1px; }
th.thTop     { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }

td.row1    { background-color: #FFFFFF; }
td.row2    { background-color: #F7F7F7; }
td.row3    { background-color: #FFFFFF; }
td.rowpic { background-color: #F2F0E6; }
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom { background-image: url('http://img6.xooimage.com/files/5/2/2/i_back_title5-ef17bb.jpg'); border: #FFFFFF 0px; height: 28px; }
td.cat,td.catHead,td.catBottom { height: 29px; border-width: 0px 0px 0px 0px; }
td.row3Right,td.spaceRow { background-color: #FFFFFF; border: #FFFFFF; border-style: solid; }

.maintitle,h1,h2    { font-weight: bold; font-size: 22px; font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif; text-decoration: none; line-height : 120%; color : #000000; }

.gen { font-size : 11px; }
.genmed { font-size : 10px; }
.gensmall { font-size : 10px; }
.gen,.genmed,.gensmall { color : #000000; }
a.gen,a.genmed,a.gensmall { color: #565037; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover    { color: #A1BA23; }

.nav1 { height: 23px; vertical-align:top; background: url('http://img4.xooimage.com/files/a/6/8/llllllllllllllllll-18a5fc8.gif'); padding: 0; margin: 0; }
.nav_top { color: #4F4F4F; padding: 0; margin: 0; }
.nav_top li {  float: center; display: inline;  }    
.nav_top a:link, .nav_top a:visited { float: center; font-size: 11px;  font-weight: bold;    padding: 4px 8px 6px 8px; text-decoration: none; color: #EEEEEE; }
.nav_top a:link.active, .nav_top a:visited.active, .nav_top a:hover { color: #FFFFFF; background: url('http://img2.xooimage.com/files/9/6/2/sans-titre-1-19d3744.png'); }

.cattitle        { font-weight: bold; font-size: 10px ; letter-spacing: 1px; color : #4F4F4F}
a.cattitle        { text-decoration: none; color : #4F4F4F; }

.forumlink        { font-weight: bold; font-size: 11px; color : #4F4F4F; }
a.forumlink     { text-decoration: none; color : #4F4F4F; }
a.forumlink:hover{ text-decoration: none; color : #A1BA23; }

.nav            { font-weight: bold; font-size: 11px; color : #000000;}
a.nav            { text-decoration: none; color : #4F4F4F; }
a.nav:hover        { text-decoration: none; }

.topictitle            { font-weight: bold; font-size: 11px; color : #000000; }
a.topictitle:link   { text-decoration: none; color : #4F4F4F; }
a.topictitle:hover    { text-decoration: none; color : #A1BA23; }

.postbody { font-size : 12px;}
a.postlink:link    { text-decoration: none; color : #4F4F4F }
a.postlink:visited { text-decoration: none; color : #5493B4; }
a.postlink:hover { color : #A1BA23;}

.copyright        { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; letter-spacing: -1px; background: url('http://img4.xooimage.com/files/a/6/8/llllllllllllllllll-18a5fc8.gif');}
a.copyright        { color: #FFFFFF; text-decoration: none;}

.name            { font-size : 11px; color : #000000;}
.postdetails        { font-size : 10px; color : #000000; }

.code {
    font-family: Courier, 'Courier New', sans-serif; font-size: 11px; color: #006600;
    background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
    border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

.quote {
    font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #444444; line-height: 125%;
    background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
    border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

.helpline { background-color: #DEE3E7; border-style: none; }

@import url('http://img10.xooimage.com/files/f/o/formie-30d7c.css');     


Forum
Author Message
KingBoo
Membre


Offline
Membre

Joined: 02 Jun 2012
Posts: 2
Niveau:
Point(s): 2
Moyenne: 1.00
Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

PostPosted: Wed 25 Jul 2012 - 19:47    Post subject: [Tuto] Installer une image de fond Reply with quote

Bonjour,

Je voudrais connaître la dimension d'une image de fond pour l'arrière plan de mon forum.
Merci d'avance !  Smile


Forum
Author Message
Hughs Marc
Membre


Offline
Membre

Joined: 08 Dec 2009
Posts: 21
Niveau:
Point(s): 21
Moyenne: 1.00
Linux Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Gémeaux (21mai-20juin) 猴 Singe

PostPosted: Thu 26 Jul 2012 - 14:12    Post subject: [Tuto] Installer une image de fond Reply with quote

Bonjour. Impossible malheureusement de donner une dimension qui convienne à tout le monde, il existe trop de résolutions d'écran différentes (aussi bien des gens qui utilisent des écrans 34'' que des gens qui utilisent des smartphones). Cependant, il est intéressant, dans le cas ou vous voulez faire un redimensionnement automatique de l'image d'en prendre une suffisement grande (comprendre 1600px*1200px minimum), mais ceci augmente le temps de chargement de la page... et l'image est bien souvent déformée.
_______________________
Administrateur sur Gundam Neo Generation
Pas d'inscription sur votre forum


Forum
Author Message
KingBoo
Membre


Offline
Membre

Joined: 02 Jun 2012
Posts: 2
Niveau:
Point(s): 2
Moyenne: 1.00
Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

PostPosted: Thu 26 Jul 2012 - 15:28    Post subject: [Tuto] Installer une image de fond Reply with quote

D'accord, merci  Smile

Forum
Author Message
Yume-sama
Membre


Offline
Membre

Joined: 04 Mar 2011
Posts: 9
Niveau:
Point(s): 8
Moyenne: 0.89
Windows Vista ou 7 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Féminin Gémeaux (21mai-20juin) 鷄 Coq

PostPosted: Sun 11 Nov 2012 - 15:03    Post subject: [Tuto] Installer une image de fond Reply with quote

Forumjeunes wrote:
TitoO37 wrote:

Bonsoir,

j'ai un petit problème avec mon forum.

Mon background ne défile pas, j'aimerai bien le défiler ... , pourtant, je n'ai pas mi la balise
Code: Sélectionner - Agrandir

background-attachment: fixed;
Merci de votre aide.

Cordialement,
Qu'appelez-vous par "défiler"? Qu'il bouge?! Je ne comprends car votre image est en Png, c'est donc une image fixe de base et je n'ai pas remarqué dans le code un quelconque défilement?! Ne parlez-vous pas de la répétition de l'image en abscisse ou en ordonnée?! Si oui, mettez "repeat-x" et "repeat-y"


Je pense que Tito037 veut simplement dire que l'image de background défile, et que le reste du background soit la couleur qu'on aurait choisis dans PA.
Mes souvenirs sont vagues, mais je me souviens d'une case "image fixe" dans la PA et la gestion des images, concernant le background. Toutefois cette case n'existe plus, ou en tout cas sur mon forum. Je le déplore car c'est justement ce qu'il me faudrait aussi.

Je vous explique un peu ce que j'aimerai obtenir :
Je voulais que ma bannière soit plus large que le corps de l'index, et j'avais trouvé un bon compromis : réaliser ma bannière en image de background et mettre une image transparente comme bannière dans le PA. Ainsi, en mettant le background en défilement, on penserait qu'il s'agit de la bannière. Je pensais mon projet infaillible, me souvent de la case citée plus haut. Mais puisqu'elle n'existe plus, et qu'il n'y a pas eu de réponse à cette question, je ne sais pas comment faire.
En plus de cela, lorsque le background est plus petit que la résolution, il se colle en bas, alors que pour mon cas, il serait idéal qu'il soit en haut.

Je vous mets ici le lien de mon forum test pour que vous compreniez plus clairement, j'ai peur d'être confuse dans ce que je dis :
http://universitehanachi.xooit.com/index.php?theme=test


Si quelqu'un a la solution, je lui en serai particulièrement reconnaissante.


Forum
Author Message
bidouille33
Membre


Offline
Membre

Joined: 11 Aug 2010
Posts: 117
Point(s): 117
Moyenne: 1.00
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Poissons (20fev-20mar) 龍 Dragon

PostPosted: Mon 12 Nov 2012 - 09:52    Post subject: [Tuto] Installer une image de fond Reply with quote

bonjour Yume-sama.
vous désirez que votre page d’accueil défile sur votre bannière ?
servez vous de ce tuto pour un redimensionnement automatique et le placement de votre bannière qui deviendra une image de fond.

http://xooit.xooit.com/t36944-Auto-Redimension-de-l-image-de-fond-selon-la-…

cordialement.


Forum
Author Message
Yume-sama
Membre


Offline
Membre

Joined: 04 Mar 2011
Posts: 9
Niveau:
Point(s): 8
Moyenne: 0.89
Windows Vista ou 7 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Féminin Gémeaux (21mai-20juin) 鷄 Coq

PostPosted: Sun 25 Nov 2012 - 19:46    Post subject: [Tuto] Installer une image de fond Reply with quote

Merci pour votre réponse, mais j'ai déjà mis en place ce système sur mon forum, et il ne permet de positionner son image de fond en haut du forum ni de faire défiler son background, soit les deux choses que je recherche...

EDIT : Bon j'ai réussi à faire défiler ma bannière avec le CSS
Au tout début de overall.hearder.tpl dans la partie CSS

Code: Sélectionner - Agrandir
/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
   
   background-image: url(http://img59.xooimage.com/files/e/9/e/banniere---jpeg-397c8e4.jpg);
   background-color: {T_BODY_BGCOLOR};
   scrollbar-face-color: #efefef;
   scrollbar-highlight-color: #;
   scrollbar-shadow-color: #54607c;
   scrollbar-3dlight-color: #c6022c;
   scrollbar-arrow-color:  #5071bd;
   scrollbar-track-color: #dddddd;
   scrollbar-darkshadow-color: #777777;



Il s'agit de la balise background-attachment: scroll; , je l'ai placé ici, en deuxième position :

Code: Sélectionner - Agrandir
/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
   
   background-image: url(http://img59.xooimage.com/files/e/9/e/banniere---jpeg-397c8e4.jpg);
background-attachment: scroll;
   background-color: {T_BODY_BGCOLOR};



Néanmoins je ne sais toujours pas comment "plaquer" ma bannière en haut.


EDIT 2 :

Bon voilà, j'ai trouvé, et ce n'était vraiment pas compliqué en vérité, il fallait juste connaître les balises CSS !
A la suite de la balise
Code: Sélectionner - Agrandir
background-attachment: scroll;


que j'ai placé (voir quelques lignes au-dessus), j'ai ajouté :
Code: Sélectionner - Agrandir
background-position: top;


ce qui, en plus de placer l'image en haut de la page, l'a centrée du même coup ! Ce qui est donc parfait ! Smile J'espère que mes expériences en CSSa aideront ceux qui veulent aussi installer ce système sur leur forum et qui n'ont, comme moi, que quelques notions de CSS ^^


Forum
Author Message
Ecaryuzan
Membre


Offline
Membre

Joined: 07 Jun 2012
Posts: 3
Niveau:
Point(s): 3
Moyenne: 1.00
Windows Vista ou 7 Masculin

PostPosted: Wed 2 Jan 2013 - 02:39    Post subject: [Tuto] Installer une image de fond Reply with quote

Bonjour, donc mon problème est que l'image de fond se répète j'ai regardé le tutoriel mis à disposition mais ces lignes n'apparaissent pas.

Voici le code que j'ai dans OVERALL_HEAD.tpl

Code: Sélectionner - Agrandir

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="{S_CONTENT_DIRECTION}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}">
<meta http-equiv="Content-Style-Type" content="text/css">
{META}
{NAV_LINKS}
<title>{SITENAME} :: {PAGE_TITLE}</title>
<link rel="stylesheet" href="http://img57.xooimage.com/files/e/1/7/bsrf-3acd39d.css" type="text/css">
<!-- BEGIN switch_enable_pm_popup -->
<script language="Javascript" type="text/javascript">
<!--
    if ( {PRIVATE_MESSAGE_NEW_FLAG} )
    {
        window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
    }
//-->
</script>
<!-- END switch_enable_pm_popup -->
</head>

<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

<a name="top"></a>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr bgcolor="#000000">
        <td height="122" valign="top">
            <!-- BANNER GOES UNDER HERE -->
            <img src="http://img55.xooimage.com/files/5/b/c/120811_raiderz_1-3a6ea3a.jpg">
    </td>
    </tr>
    <tr align="right" valign="top" bgcolor="#000000"> 
        <td height="19" colspan="2">
            <!-- BEGIN switch_user_logged_out -->
            <a href="{U_LOGIN_LOGOUT}"><img src="http://img57.xooimage.com/files/6/5/d/untitled-3a8afe1.png" alt="{L_LOGIN_LOGOUT}" hspace="3" border="0"></a> 
            <a href="{U_REGISTER}"><img src="http://img59.xooimage.com/files/a/0/7/untitled-3a8b0b8.png" alt="{L_REGISTER}" hspace="3" border="0"></a> 
            <!-- END switch_user_logged_out -->
            <!-- BEGIN switch_user_logged_in -->
            <a href="{U_LOGIN_LOGOUT}"><img src="http://img57.xooimage.com/files/3/1/1/untitled-3a8b021.png" alt="{L_LOGIN_LOGOUT}" hspace="3" border="0"></a>                            
            <!-- END switch_user_logged_in -->
            <a href="{U_PROFILE}"><img src="http://img59.xooimage.com/files/3/a/5/untitled-3a8b052.png" alt="{L_PROFILE}" hspace="3" border="0"></a> 
            <a href="{U_PRIVATEMSGS}"><img src="http://img59.xooimage.com/files/2/1/f/untitled-3a8b064.png" alt="{PRIVATE_MESSAGE_INFO}" hspace="3" border="0"></a>
            <a href="{U_FAQ}"><img src="http://img56.xooimage.com/files/4/c/2/untitled-3a8b082.png" alt="{L_FAQ}" hspace="3" border="0"></a> 
            <a href="{U_SEARCH}"><img src="http://img55.xooimage.com/files/e/2/c/untitled-3a8b0de.png" alt="{L_SEARCH}" hspace="3" border="0"></a> 
            <a href="{U_MEMBERLIST}"><img src="http://img56.xooimage.com/files/a/d/a/untitled-3a8b03c.png" alt="{L_MEMBERLIST}" hspace="3" border="0"></a> 
            <a href="{U_GROUP_CP}"><img src="http://img57.xooimage.com/files/6/f/d/untitled-3a8b125.png" alt="{L_USERGROUPS}" hspace="3" border="0"></a>
        </td>
    </tr>
    <tr bgcolor="#000000"> 
        <td colspan="2">
            <table width="780" border="0" cellspacing="0" cellpadding="8">
                <tr> 
                    <td>


Forum
Author Message
Contenu Sponsorisé





PostPosted: Today at 21:00    Post subject: [Tuto] Installer une image de fond

Display posts from previous:   
Reply to topic Page 261 of 268 Goto page: <  1, 2, 3260, 261, 262266, 267, 268  >




Portal | Index | Administration Panel | Create a forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group |
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401