La date/heure actuelle est Mar 17 Oct 2017 - 17:16 - créer un forum

[Tuto] Installer une image de fond

Aller au contenu

Poster un nouveau sujet Répondre au sujet Aller à la page: <  1, 2, 3250, 251, 252266, 267, 268  >

[Tuto] Installer une image de fond
Auteur Message
Spawn725





MessagePosté le: Dim 10 Juin 2012 - 20:18    Sujet du message: [Tuto] Installer une image de fond Répondre en citant

PublicitéSupprimer les publicités ?
Revue du message précédent :

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 ?
Auteur Message
Edward Dumbledore
Membre


Hors ligne
Membre

Inscrit le: 30 Juil 2009
Messages: 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

MessagePosté le: Dim 10 Juin 2012 - 20:30    Sujet du message: [Tuto] Installer une image de fond Répondre en citant

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

Forum
Auteur Message
Samoht


Hors ligne
Invité




MessagePosté le: Mar 12 Juin 2012 - 13:25    Sujet du message: [Tuto] Installer une image de fond Répondre en citant

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.>



Auteur Message
bidouille33
Membre


Hors ligne
Membre

Inscrit le: 11 Aoû 2010
Messages: 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

MessagePosté le: Mar 12 Juin 2012 - 15:45    Sujet du message: [Tuto] Installer une image de fond Répondre en citant

bonjour.

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

cordialement.


Forum
Auteur Message
Samoht


Hors ligne
Invité




MessagePosté le: Mar 12 Juin 2012 - 15:54    Sujet du message: [Tuto] Installer une image de fond Répondre en citant

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


Auteur Message
Spoke59
Membre


Hors ligne
Membre

Inscrit le: 23 Juin 2012
Messages: 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

MessagePosté le: Dim 8 Juil 2012 - 11:54    Sujet du message: [Tuto] Installer une image de fond Répondre en citant

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
Auteur Message
KingBoo
Membre


Hors ligne
Membre

Inscrit le: 02 Juin 2012
Messages: 2
Niveau:
Point(s): 2
Moyenne: 1,00
Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

MessagePosté le: Mer 25 Juil 2012 - 19:47    Sujet du message: [Tuto] Installer une image de fond Répondre en citant

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
Auteur Message
Hughs Marc


Hors ligne
Invité




MessagePosté le: Jeu 26 Juil 2012 - 14:12    Sujet du message: [Tuto] Installer une image de fond Répondre en citant

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.

Auteur Message
KingBoo
Membre


Hors ligne
Membre

Inscrit le: 02 Juin 2012
Messages: 2
Niveau:
Point(s): 2
Moyenne: 1,00
Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

MessagePosté le: Jeu 26 Juil 2012 - 15:28    Sujet du message: [Tuto] Installer une image de fond Répondre en citant

D'accord, merci  Smile

Forum
Auteur Message
Yume-sama
Membre


Hors ligne
Membre

Inscrit le: 04 Mar 2011
Messages: 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

MessagePosté le: Dim 11 Nov 2012 - 15:03    Sujet du message: [Tuto] Installer une image de fond Répondre en citant

Forumjeunes a écrit:
TitoO37 a écrit:

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
Auteur Message
bidouille33
Membre


Hors ligne
Membre

Inscrit le: 11 Aoû 2010
Messages: 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

MessagePosté le: Lun 12 Nov 2012 - 09:52    Sujet du message: [Tuto] Installer une image de fond Répondre en citant

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
Auteur Message
Yume-sama
Membre


Hors ligne
Membre

Inscrit le: 04 Mar 2011
Messages: 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

MessagePosté le: Dim 25 Nov 2012 - 19:46    Sujet du message: [Tuto] Installer une image de fond Répondre en citant

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
Auteur Message
Ecaryuzan
Membre


Hors ligne
Membre

Inscrit le: 07 Juin 2012
Messages: 3
Niveau:
Point(s): 3
Moyenne: 1,00
Windows Vista ou 7 Masculin

MessagePosté le: Mer 2 Jan 2013 - 02:39    Sujet du message: [Tuto] Installer une image de fond Répondre en citant

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
Auteur Message
Ecaryuzan
Membre


Hors ligne
Membre

Inscrit le: 07 Juin 2012
Messages: 3
Niveau:
Point(s): 3
Moyenne: 1,00
Windows Vista ou 7 Masculin

MessagePosté le: Jeu 3 Jan 2013 - 03:16    Sujet du message: [Tuto] Installer une image de fond Répondre en citant

C'est bon j'ai réussi, mais l'image ne s'adapte pas aux résolutions est-il possible de le faire ?

Voici le code que j'ai à présent :

Code: Sélectionner - Agrandir


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<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 -->
<style>
html,body{margin:0;padding:0;}
#bg,#bg table,#bg td{width:100%;height:100%}
#bg div{position:absolute;width:200%;height:200%;top:-50%;left:-50%}
#bg td{vertical-align:middle;text-align:center}
#bg img{min-height:50%;min-width:50%;margin:auto}
#main{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;margin:0;padding:0;}
div#bg {
  z-index: -3;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  top: expression(body.scrollTop + 0 + "px");
}
</style>
</head>

<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<div id="bg">
<div>
<table cellpadding="0" cellspacing="0"><tr><td>
<img alt="" src="http://img96.imageshack.us/img96/5231/lineageiiscene1920x1080.jpg">
</td></tr></table>
</div>
</div>

<div id="main">  
<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>

<iframe name="google_ads_frame" style="z-index:20;" src="" width="0" height="0" scrolling="no" frameborder="0" allowtransparency="true"></iframe>



Dernière édition par Ecaryuzan le Lun 7 Jan 2013 - 04:26; édité 1 fois
Forum
Auteur Message
Couette
Membre


Hors ligne
Membre

Inscrit le: 20 Mai 2011
Messages: 57
Niveau:
Point(s): 58
Moyenne: 1,02
Windows Vista ou 7 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Féminin Vierge (24aoû-22sep)

MessagePosté le: Jeu 3 Jan 2013 - 19:06    Sujet du message: [Tuto] Installer une image de fond Répondre en citant

Bonjour,
Votre réponse est ici : http://xooit.xooit.com/t36944-Auto-Redimension-de-l-image-de-fond-selon-la-resolution.htm
_______________________
Forum jeunes de retour..

Merci d'éviter les demandes d'aide par Mp, je fais ce que je peux pour répondre aux topics rapidement Smile


Forum
Auteur Message
Ecaryuzan
Membre


Hors ligne
Membre

Inscrit le: 07 Juin 2012
Messages: 3
Niveau:
Point(s): 3
Moyenne: 1,00
Windows Vista ou 7 Masculin

MessagePosté le: Lun 7 Jan 2013 - 04:23    Sujet du message: [Tuto] Installer une image de fond Répondre en citant

Bonjour, j'ai suivis ce tutoriel mais rien n'y change.

Code: Sélectionner - Agrandir


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<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 -->
<style>
html,body{margin:0;padding:0;}
#bg,#bg table,#bg td{width:100%;height:100%}
#bg div{position:absolute;width:200%;height:200%;top:-50%;left:-50%}
#bg td{vertical-align:middle;text-align:center}
#bg img{min-height:50%;min-width:50%;margin:auto}
#main{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;margin:0;padding:0;}
div#bg {
  z-index: -3;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  _position: absolute;
  top: expression(body.scrollTop + 0 + "px");
}
</style>
</head>

<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<div id="bg">
<div>
<table cellpadding="0" cellspacing="0"><tr><td>
<img alt="" src="http://www.top-walls.com/wp-content/uploads/2012/11/anime-anime-girls-Guilty-Crown-Yuzuriha....jpg">
</td></tr></table>
</div>
</div>

<div id="main">  
 
<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>

    <iframe name="google_ads_frame" style="z-index:20;" src="" width="0" height="0" scrolling="no" frameborder="0" allowtransparency="true"></iframe>





Forum
Auteur Message
Contenu Sponsorisé





MessagePosté le: Aujourd’hui à 17:16    Sujet du message: [Tuto] Installer une image de fond

Montrer les messages depuis:   
Répondre au sujet Page 251 sur 268 Aller à la page: <  1, 2, 3250, 251, 252266, 267, 268  >




Index | Panneau d’administration | Créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group | Traduction par : phpBB-fr.com
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401