Merci Basil, c'est effectivement ça la différence!

Merci beaucoup pour ce code, c'est génial

Derien, tous le plaisir est pour moi ^^

J'ai un problème pour ça. Mon image ne s'ajuste pas à la grandeur de mon cadre.... Est-ce c'est la taille de l'image le problème ? ou y a t il des dimensions à mettre ?

Code:

.quote {
background-image: url('http://img200.imageshack.us/img200/1891/newceltaniacite.png') !important;
background-repeat: no-repeat !important;
background-position: left top !important;
padding-left: 20px;
}

[url=.quote { background-image: url('https://2img.net/r/ihimizer/img200/1891/newceltaniacite.png') !important; background-repeat: no-repeat !important; background-position: left top !important; padding-left: 20px; }]Image à l'appuie !![/url]

[quote="Elektra Kloo"]J'ai un problème pour ça. Mon image ne s'ajuste pas à la grandeur de mon cadre.... Est-ce c'est la taille de l'image le problème ? ou y a t il des dimensions à mettre ?

Code:

.quote {
background-image: url('http://img200.imageshack.us/img200/1891/newceltaniacite.png') !important;
background-repeat: no-repeat !important;
background-position: left top !important;
padding-left: 20px;
}

Image à l'appuie !!

Qu'entend-tu par "ne s'ajuste pas à la grandeur de mon cadre" ??

Un screen peut-etre ?

Ben comme vous l'avez vu dans l'image que j'ai donné (preuve à l'appuie est mon screen). Mon image est là mais lorsque le texte est plus grand que la dimension de l'image.... ben on apparition d'un fond de couleur....l'image ne s'allonge pas, ne s'adapte pas la grandeur du texte.

Ah oui en effet, mais ce tuto n'explique pas vraiment comment mettre une image de fond, qui fait toute la surface !

C'est plutot un tuto pour de petit icone ^^

Sinon pour votre probleme, essayer peut-etre d'ajuster avec des width/height mais il me semble qu'on ne peut pas redimensionner les images background :/
A faire verifier par un pro ^^

Beh il suffit de changer la couleur de fond de la zone de citation et hop ! problème résolu !

ok je vois

Merci, moi ça m'aide beaucoup! ^__^

merci

[b]Bonjour/Boinsoir
J'aimmerais que mon image se tende sur toute la surface de la citation, j'ai tester "repeat" et ca fait pas trop /pas du tout jolie, donc je veux que mon image de fond se tende sur toute la zone de texte et aussi j'aimmerais changer la couleur du texte dans le champ de citation

Tout simplement géniale cette astuce. J'aurai cependant une petite question : est il possible de décaler le texte à l'intérieur de la citation de façon à ce que l'image ne se retrouve pas en dessous ?.

Voici ce que j'obtiens



et mon css

.quote {
background-image: url('https://i.servimg.com/u/f63/11/93/85/24/giftes11.gif') !important;
background-repeat: no-repeat !important;
background-position: left top !important;
padding-left: 20px;
}


Merci par avance pour vos réponses

bonjour ^^

essayer ceci :

.quote {
background-image: url('https://i.servimg.com/u/f63/11/93/85/24/giftes11.gif') !important;
background-repeat: no-repeat !important;
background-position: left top !important;
padding-left: 20px;
text-indent: 30px;
}

Mais je ne suis vraiment pas sur ^^

Joris =

pour l'image sur tout la distance de votre citation, sans repeat je ne pense pas que ce soit possible, il vous faut trouver une image plus grande, ou essayer d'agrandir celle que vous voulez, mais ça risque de rendre moins bien

Pour la couleurs essayer ceci :

.quote {
background-image: url('votre_image') !important;
background-repeat: no-repeat !important;
background-position: left top !important;
padding-left: 20px;
color: #COULEUR;
}

Amicalement =)

Bonjour Kaylon et merci pour cette aide. J'étais justement en train justement de chercher. Le text-indent ne fonctionne malheureusement que sur la première ligne . Ceci dit cela améliore déjà nettement la lecture de la citation. je vais continuer à chercher.

ah, il me semblais bien que ce n'etait que pour al premiere ligne ^^

Désolé :/

Pas de soucis Kaylon,cette aide à été plus qu'appréciable. Elle a permis de résoudre une partie du pb.

et si vous essayer d'augmenter le :

padding-left: 20px;

sa donne quoi ?

J'ai fini par trouver deux solutions acceptables . Comme un gros busard, j'avais complétement oublié que le padding dois prendre en compte la largeur de l'image insérée :jenesaispas:

donc voici les deux solutions en image puis le css



.quote {
background-image: url('https://i.servimg.com/u/f63/11/93/85/24/giftes11.gif') !important;
background-repeat: no-repeat !important;
background-position: left top !important;
padding: 33px !important;
text-indent: 50px;
}

et




.quote {
background-image: url('https://i.servimg.com/u/f63/11/93/85/24/giftes11.gif') !important;
background-repeat: no-repeat !important;
background-position: left top !important;
padding-left: 65px !important;
text-indent: 50px;
}

Pour installer une marge droite équivalente il suffit de rajouter
padding-right: 65px !important;

j'ai agrémenté avec des bordures entourant le quote
.quote {
border: 2px solid #D6FC91;
margin: 0;
padding: 0 0 0 3px;}

Bon , ça fait un peu tuto mais je me suis dit que cela pourrait servir aux membres du site.

Ps : si quelqu'un à une astuce pour intégrer une ombre portée sur le gif, je suis preneur

personnellement, je prefere le premier ^^

merci de nous avoir partager ces deux astuces

Merci à toi Kaylon de m'avoir orienté vers cette solution.

Derien

Pour ma part le fait qu'on voit toujours le texte sur l'image me gêne.
N'y-a-t-il pas moyen d'intégrer une histoire de tableau pour séparer l'image et le texte ?