Sujets similaires

Bonjour voila
je viens de remarqué sur un forum
qu'ils ont mit un fond et une banniére fond?
comment cela es ce possible?
CSS? template?
si quelqu'un pourrais me dire
merciii

(site exemple: http://www.new-york-city-life.com/ )

Salut,

Je suis contente car je viens de faire la même chose sur mon forum test :p
> ICI

Bon en faite il s'agit du css ^^.

Voici le code :

Code:: /* Pour forum */

td {
border: none;
-moz-border-radius: 10px;
}

body
{
background-color: #e6e3e3;
background-image: url(comme page body);
background-repeat: repeat-y;
background-position: top center;
}

#i_logo
{
background-image: url(Lien image logo *la bannière*);
width: 950px;
height: 572px;
margin-top: -19px;
margin-bottom: -19px;
background-position: top-center;
}

.bodylinewidth
{
max-width: 950px;
margin: auto;
}

.forumline
{
max-width: 880px;
margin-auto;
border: 1px #820707 solid;
}

table
{
max-width: 880px;
-moz-border-radius: 5px;
}

#page-body
{
background-image: url(Lien image qui va se répété partout sur le forum*en gros le fond*);
background-repeat: repeat-y;
max-width: 950px;
padding-left: 40px;
padding-right: 40px;
margin: auto;
background-position: center;
}

#page-footer
{
background-image: url(Lien image en bas du forum*sur mon fofo test c'est la ville et la fille*);
background-position: center;
background-repeat: no-repeat;
width: 950px;
height: 175px;
margin-bottom: -40px;
}

Après à toi de bidouillé c'est le css de mon forum test :p donc mis spécialement.
Par contre sur IE sa marche pas... ^^" sa merdouille .

je comprend pas trop excuse moi :/

malgré que je met un lien pour le fond
ça me copie plein de fois la banniére :/

voila ce que ça me fait

http://creationfg.bbflash.net/index.htm

Pour faire plus simple, essaie ce code ^^ :

Code:: body {
background-image: url("url de l'image de fond");
background-repeat: repeat-y;
background-position: top center;
}
#i_logo
{
background-image: url("url du logo");
background-position: top-center;
background-repeat: no-repeat;
}

Cela revient un peu au même que Nashii, mais sans tout le reste. Wink

^^" *décidement sylver j'adore trop ton personnage ^^" enfin bon *

Sinon le code que tu as mis en fond n'est que la banniere

Code:: http://i46.tinypic.com/5x7j0n.png

Il faut le mettre en tant que logo.

Sylveer a écrit:

Pour faire plus simple, essaie ce code ^^ :

Code:: body {
background-image: url("url de l'image de fond");
background-repeat: repeat-y;
background-position: top center;
}
#i_logo
{
background-image: url("url du logo");
background-position: top-center;
background-repeat: no-repeat;
}

Cela revient un peu au même que Nashii, mais sans tout le reste. Wink

pareil ça ne fonctionne pas :/
je comprend pas ce que je fais de travers

On peut voir ton CSS entier?
Tu peux toujours essayer ceci:

Code:: body {
background-image: url("url de l'image de fond");
background-repeat: repeat-y;
background-position: top center;
}
#i_logo
{
background-image: url("url du logo");
background-position: top-center;
background-repeat: no-repeat !important;
}

N'oublie pas que l'url de l'image de fond c'est le fond super stylisé et l'url du logo c'est la bannière.

Toujours la même chose
pourtant je met bien ma banniére a logo
et un pattern comme fond
voici le CSS

Code:: /* bann */

body { background-attachment: no-fixed; background-repeat: no-repeat; background-position: top center;}

/* navig */

a.mainmenu {
background-image:url(NE PAS REMPLIR);
border: #ffffff 1px solid;
padding-right: 15px;
font-weight: bold;
-moz-border-radius-topright: 15px;
-moz-border-radius-topleft: 15px;
font-variant: small-caps;
}

a.mainmenu:hover {
border: #ffffff 1px solid;
}

/* lien maj */

a:hover{
text-decoration: none !important;
text-transform: uppercase;
}

/* page accueil */

.box {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background-color:#F2DBBF;
color:#718091;
font-size:11px;
margin:0;
padding:3px 10px;
}

.boxtitle {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background-color:#A88550;
color:#F0F0F0;
display:block;
font-size:11px;
font-weight:bold;
margin:0 0 5px;
padding:3px 10px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}

/* lien page accueil */

a.forumlink{
-moz-border-radius: 7px 7px 7px 7px;
background-color: #ffffff;
border-bottom: 5px double #e8afc5;
color:#e8afc5;
font-family: georgia;
font-size: 14px;
font-weight: lighter;
letter-spacing: 2px;
display:block;
text-align: center;
}

a.forumlink:hover{
color:#F2DBBF;
font-family: georgia;
font-size: 14px;
font-weight: lighter;
letter-spacing: 2px;
text-align: center;}

/* lien onglet */

.abc {border-bottom: 5px solid #704D19}
.def {
background-color: #704D19;
-moz-border-radius:5px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px;}

/* pas de soulignement de liens */

a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none !important;}

/* cadre arrondi */

.forumline, td.row1, td.row2, td.row3 {
-moz-border-radius: 7px;
}

/* infobulle */

a.imginfo {
position: relative;
color: #A88550;
text-decoration: none;
border-bottom: 0px #A88550 solid; /* on souligne le texte */
}

a.imginfo span {
display: none; /* on masque l'infobulle */
}
a.imginfo:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on dÃƒÂfinit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par dÃƒÂfaut en curseur d'aide */
}
a.imginfo:hover span {
display: inline; /* on affiche l'infobulle */
position: absolute;
white-space: nowrap; /* on change la valeur de la propriÃƒÂtÃƒÂ white-space pour qu'il n'y ait pas de retour Ãƒ la ligne non-dÃƒÂsirÃƒÂ */
top: 30px; /* on positionne notre infobulle */
left: 20px;
background: white;
color: A88550;
padding: 3px;
border: 0px solid grey;
border-left: 5px solid #A88550;
border-right: 3px solid #A88550;
border-top: 3px solid #A88550;
border-bottom: 5px solid #A88550;
}

img.sidebar {padding:2px; -moz-opacity: 0.6; margin:2px; -moz-border-radius: 4px; border: 1px solid #5C471F; background-color:#5C471F}
img.sidebar:hover {padding:2px; -moz-opacity: 1; margin:2px; -moz-border-radius: 4px; border: 1px solid #B3AB6A;}

/* opacitÃ */

a img {
border: none;
opacity: 1;
filter:alpha(opacity=100);
}
a:hover img {
opacity: 0.7;
filter:alpha(opacity=70);
}

/* qui est en ligne */

.statistiques{
border:0px;
background-image: url("http://i46.tinypic.com/2dkbkpc.png");
background-repeat: no-repeat;
background-position: top center;
height:150px;}

.groupes{
background-color:#66300B;border: 1px #BDB67A dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;}

/* cadre vava */

.postdetails.poster-profile a img {
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
border: 5px solid #A88550;
}

/* en ligne hors ligne profil */

.offlinebutton {
background-color: transparent;
border: none;
background-image: url('http://i37.tinypic.com/24mfk07.jpg');
background-repeat : no-repeat;
background-position : center;
min-width: 200px;
width: 200px;
min-height: 42px;
height: 42px;
}

.postdetails.poster-profile textarea { width: 200px;}
input,textarea, select {
-moz-border-radius-bottomleft:9px;
-moz-border-radius-bottomright:9px;
-moz-border-radius-topleft:9px;
-moz-border-radius-topright:9px;
}

/* citer quote */

.code{
font-family: Georgia;
font-size: 12px;
color: #718091;
background-color: #FFFFFF;
border: 8px dotted #718091;
border-style: 5px dotted;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
}

.code {
-moz-border-radius-bottomleft:20px;
-moz-border-radius-bottomright:20px;
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
background-color: #FFFFFF
padding:10px;
}

.spoiler {
-moz-border-radius-bottomleft:20px;
-moz-border-radius-bottomright:20px;
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
background-color: #FFFFFF
padding:10px;
}

.quote {
-moz-border-radius-bottomleft:20px;
-moz-border-radius-bottomright:20px;
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
background-color: #FFFFFF
padding:10px;
}

/* menu PA */

menuu {
text-align: center;
color: #code couleur titre;
font-size: 12px;
font-family: verdana;
padding: 1px;
margin : 2px;
border-bottom : 2px solid #code couleur du soulignement du titre;
border-left: 3px solid #; border-right:;}

#subnav A:link, #subnav A:visited, #subnav A:active {
font-family: verdana;
font-size: 10px;
text-align: center;
padding: 2px;
color: #code couleur du texte du menu;
background-color: #code couleur du fond du menu;
line-height: 12px;
display: block;
border-bottom: 5px solid #;
border-left: 5px solid #A88550;
border-right: 5px solid #A88550;}

#subnav A:hover {
color: #ffffff;
background-color: #A88550;
border-left: 3px solid #704D19; border-right:704D19;}

/* Pour forum */

body {
background-image: url("http://obsession27.free.fr/divers/fonds/gui3.jpg");
background-repeat: repeat-y;
background-position: top center;
}
#i_logo
{
background-image: url("http://i46.tinypic.com/5x7j0n.png");
background-position: top-center;
background-repeat: no-repeat !important;
}

Code:: body {
background-image: url("http://obsession27.free.fr/divers/fonds/gui3.jpg");
background-repeat: repeat-y;
background-position: top center;

Code:: body { background-attachment: no-fixed; background-repeat: no-repeat; background-position: top center;}

C'est un code inutile ... Pourquoi ne pas rassembler ?

Le repeat ne met pas le -y ^^ sa sera un fond qui se repete.

Code:: #i_logo
{
background-image: url("http://i46.tinypic.com/5x7j0n.png");
background-position: top-center;
background-repeat: no-repeat !important;
}

Rajoute width et heigth *largeur et hauteur*, sa marcheras peut être

Moi ça marche bien mais à moitié, genre il n'y a qu'une ligne du pattern, à la fois sur IE et sur Firefox

Code:: body {
background-image: url("http://obsession27.free.fr/divers/fonds/gui3.jpg");
background-repeat: repeat;
background-position: top center;
}
#i_logo
{
background-image: url("http://i46.tinypic.com/5x7j0n.png");
background-position: top-center;
background-repeat: no-repeat !important;
}

Met ceci pour voir~

EDIT: OMG Grillée par Nashii xD

Mouahah je suis rapide et sans le tester sur mon forum test *nashii l'éclair à la rescousse mouahah *

J'ai pas testé non plus xD *sort*
N'oublie pas de nous donner des nouvelles Poussette =D

je viens de le faire donc le fond se met correctement
mais la banniére est couper??

As tu fait ce que j'ai dit ? La longueur et la hauteur ?...

Code:: #i_logo
{
background-image: url("http://i46.tinypic.com/5x7j0n.png");
background-position: top-center;
background-repeat: no-repeat !important;
width: XXpx;
height: XXpx;
}

*snifon ne m'écoute jamais T.T*

oui je viens de testé a l'instant mais ça élargie tout le forum
tu peux aller voir sur mon fow test

http://creationfg.bbflash.net/index.htm

Fait voir tout le css que ta modifié s'il te plait...

ok le voici

Code:: /* Pour forum */

body {
background-image: url("http://obsession27.free.fr/divers/fonds/gui3.jpg");
background-repeat: repeat;
background-position: top center;
}
#i_logo
{
background-image: url("http://i46.tinypic.com/5x7j0n.png");
background-position: top-center;
background-repeat: no-repeat !important;
width: 1200px;
height: 450px;
}

Bah sa prend la largeur de la banniere enfin longueur.. Moi j'ai pas se problème sur mon forum test ( avec le code que j'ai donner au début ). Ma banniere n'est pas aussi grande.
Sinon il existe une autre solution.. La banniere fond ( Orange a mis un tuto sur le forum faut le retrouver).. Sa fonctionne avec les templates...

habituellement je met ma banniére en fond en faite comme les trois quart des forum actuellement
mais la je voudrais faire comme sur le forum cité que malgré la banniére fond que derriére il y est tout de même un fond
toi apparemment tu n'as pas le soucis car la banniére est de taille normal :/

j'espére que quelqu'un sera m'aidais
merci pour ton aide en tout cas

Ehm tout d'abord ta bann est encore un peu coupée, tu devrais mettre 1280 à width~

Sinon tu as été voir quelle largeur tu as mit dans ton forum? C'est dans général->configuration-> largeur du forum
C'est peut-être [je dis bien peut-être XD] la source du problème.

Ou il y a aussi comme Nashii dit, Orange a fait un super tuto ici que tu peux toujours essayer si ton problème ne se résout pas.

il est a 50% donc ça ne dois pas venir de la
je vais testé le tuto
je vous tiendrais au courant

Sujet: Re: fond + banniére fond??? Ven 12 Mar 2010, 01:36

Je classe le sujet puisqu'il a été résolu dans le topic du tuto Wink

fond + banniére fond???

fond + banniére fond???

Sujets similaires

Sujets similaires

Partenaires Or