Prob image de fond pour chatbox

[Jézebel L.]

Bonjour/Bonsoir

Tout d'abord, j'espère être dans la bonne section.

Mon problème concerne l'affichage d'une image en fond de ma chatbox.

Mon forum est un phpbb2.

J'ai bien entendu, consulter tous les sujets sur ce forum, concernant l'affichage d'une image dans la chat box.

J'ai tout essayé, mais rien, le fond reste noir.

Je sais plus quoi faire, j'aimerais bien changer un peu la chatbox, qui depuis la création du forum vers 2009 a toujours eu un fond noir.

Besoin de votre aide, svp.

Voici l'image que je veux mettre :



Voici mon css pour la chatbox :

Code:

/* CHATBOX */

body.chatbox {
background-image:url("http://i41.servimg.com/u/f41/13/41/02/96/20010.png");
background-repeat:no-repeat;
color: #000000;
}

#chatbox .chatbox_row_1,#chatbox .chatbox_row_2{
background-color: transparent;
}
#chatbox_header {
background-image:url('http://i41.servimg.com/u/f41/13/41/02/96/couleu10.png');
}

#chatbox_header .cattitle strong {
display: none ;
}
#chatbox_header .cattitle:before {
content: "MiaouBox" ;
}

.chatbordure {
border:solid 1px #000000;
}

#chatbox_header .catBottom .cattitle {
margin:3px !important;
padding:3px;
text-align:center;
font-size:11px !important;
font-weight:bold;
font-variant :small-caps;
}

#chatbox_header .chatbox-options .genmed,
#chatbox_header .chatbox-options {
color:#FFFFFF !important;
font-size:9px !important;
font-weight:bold;
}

#chatbox_header .chatbox-options a {
color:#FFFFFF;
border:solid 1px #000000;
margin-bottom:3px !important;
padding:3px;
text-align:center;
font-size:9px !important;
font-weight:bold;
}

#chatbox {
position: absolute;
top: 30px;
left: 181px;
right: 0;
bottom: 45px;
overflow: auto;
color:#FFFFFF;
padding: 3px;
text-align: left;
font-size:11px !important;
}

#chatbox_members .member-title {
background-image: url('http://i41.servimg.com/u/f41/13/41/02/96/couleu10.png');
color:#FFFFFF;
border:solid 1px #000000;
margin:3px !important;
padding:3px;
text-align:center;
font-size:11px !important;
font-weight:bold;
font-variant :small-caps;
}

#chatbox_members {
position: absolute;
top: 30px;
bottom: 30px;
width: 180px;
overflow: auto;
border-right: solid 1px #000000;
}

#chatbox .catBottom {
border: none;
}

#chatbox_footer {
background-image: url('http://i41.servimg.com/u/f41/13/41/02/96/couleu10.png');
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 5px;
color:#FFFFFF;
border:solid 1px #000000;
margin:3px !important;
opacity:1;
text-align:left;
font-size:9px !important;
}

#chatbox_footer label {
color:#FFFFFF;
font-size:11px !important;
font-variant: small-caps;
font-weight:bold;
}

#message {
color:#FFFFFF;
border:solid 1px #000000;
margin:3px !important;
padding:2px;
text-align:left;
font-size:9px !important;
}

#submit_button {
background-image: url('http://i41.servimg.com/u/f41/13/41/02/96/couleu10.png');
color:#FFFFFF;
border: solid 1px #000000;
margin:3px !important;
padding:2px;
text-align:left;
font-size:9px !important;
}

.fontbutton {
padding: 1px;
text-align:left;
border: solid 1px #000000;
}

[Jézebel L.]

Un ptit up' pour pas qu'on m'oublie ^^'

[Jézebel L.]

Up ! svp ^^'

[Threax]

Un ptit up' pour pas qu'on m'oublie ^^'

Bonjour, Je vous rappelle qu'il est autorisé un seul UP par tranche de 24 heures, à partir de votre dernier message posté dans le sujet concerné. Je vous invite à lire : - Règles générales du forum - Charte de ce forum

Je viens de tester votre CSS, il fonctionne. S'il ne fonctionne pas sur votre forum, c'est peut-être qu'un autre CSS fait barrage, essayez de le mettre tout à la fin de votre CSS personnalisé ?

[Jézebel L.]

Bonjour

Tout d'abord désolée pour le 1er "up".

Que dois-je mettre exactement, à la fin de mon css ?
seulement cette partie ?

Code:

body.chatbox {
background-image:url("http://i41.servimg.com/u/f41/13/41/02/96/20010.png");
background-repeat:no-repeat;
color: #000000;
}
 
#chatbox .chatbox_row_1,#chatbox .chatbox_row_2{
background-color: transparent;
}

Je comprends pas très bien, je commence tout juste dans les css

[Threax]

En gros, si vous mettez :

Code:

#chatbox {
  color: red;
}

#chatbox {
  color: blue;
}

#chatbox {
  color: green;
}

Le texte sur la chatbox sera vert, car c'est la dernière propriété rencontrée qui est effectivement prise en compte. Les autres s'annulent.
Donc je vous demandais de déplacer la partie de votre CSS liée au fond pour voir si, une fois mise à la fin, ça changeait quelque chose

[Jézebel L.]

Salut Threax

En déplaçant le css comme vous me l'avez conseillé, l’image est enfin apparue !
j'ai même pu en changer ! Génial !
Merci pour tout !!!

Cependant, l'image ne remplit pas toute la chatbox :

capture :



J'ai eu beau changer la position, mettre : center, left, right,
ça remplit pas.

J'ai même changer la taille de l'image, la faisant plus grande ...etc...
toujours même résultat.

Puis j'ai fait une autre tentative en enlevant le "no-" devant repeat, donc pour répéter l'image
mais ça ne fait pas très joli, c’est pas esthétique, si je puis dire.

Y'a t'il un moyen d'y remédier, ou alors c’est impossible ?

[Threax]

Bonjour,

Rajoutez :

Code:

background-size: 100%;

L'image sera étirée si elle est trop petite (mais risque de perdre en qualité)

[Jézebel L.]

Salut,

J'ai rajouté le code, et l'image dont j'ai changé la position, remplit la chatbox
et ne perd pas grand chose en qualité, dieu merci !

capture



Merci beaucoup, je vous en suis très reconnaissante.

Mais encore une toute petite ombre au tableau, certains membres qui utilisent internet explorer, ne voit pas l'image en grand et autres petits détails du forum (comme la transparence), bref, j'ai l'impression que ça se voit que sous Firefox

Y' a un truc à faire pour eux dans css, ou alors rien...

[Threax]

Il n'y a qu'une seule chose à faire : prier pour qu'ils arrêtent d'utiliser Internet Explorer.

[Jézebel L.]

Salut

MDR, oui je vais prier.

Sinon, c'est bon pour moi, problème résolu
et une fois encore un grand merci !!!