Image en fond d'un message, avec écriture par dessus.

Bien le bonjour à tous,

Mon titre n'est pas très explicite, je vais donc préciser la chose. Voila sur un forum j'ai vu un règlement rédigé avec en arrière plan une image.
Comme en témoigne cette screenshot:

Spoiler:

Je me suis tout d'abord dit qu'il avait simplement tapé son règlement sur photoshop, et glisser l'image sous une opacité réduite en fond, cependant il s'avère que ce n'est pas ça, comme en témoigne le surlignement de l'écriture ci-dessous:

Spoiler:

Loin de moi l'envie de les plagiez, mais je trouve que ça embelli beaucoup des messages importants tel que des règlements. De plus la curiosité s'impose d'elle même^^.

merci d'avance à ceux qui s'intéresseront à mon problème et ceux qui tenteront de le résoudre.

C'est du Css, je connait le principe pour faire ça. Dans ton css tu met avec un codage que quand tu insère cette balise, elle auras ce fond. Ensuite sur ton Html tu met ton texte entre la balise et tu à une image de fond. C'est tout ce que je sais, je ne connait pas le code désolés.
Bises

Merci bien. Donc en fait il faut que je mette un code CSS, avec une class, que j'appliquerai à une image moi même. Je vois, merci pour ton aide, on se rapproche petit à petit de l'effet attendu.

Sparkman je vois pas l'intérêt de poster si tu n'as pas la solution. x)

voici le code à insérer.

le code html (là où tu écris ton post, là où tu places ton en-tête etc).

Code:


<div style="background: url('URL DE TON IMAGE DE FOND') center no-repeat;">TON TEXTE</div>


Ah! merci beaucoup. Il marche à merveille! Merci à vous deux.

Edite ton premier message et affiche le bouton "Résolu" s'il te plait x).

Voila, c'est fait.^^

A ce propos, j'aurai une question. Est ce que c'est possible que un code pour page d'accueil peut caché l'effet de ce code ? Voici un rendu de ce que ca m'a donné :


Tu vois le render du Raikage, bah ca me la pas mis en entier mais que une petite partie. Problème de code ? Ou c'est normal ?

Faut que tu règles/ajoute le width = largeur et height = hauteur de ton image je pense.

Oui mais mon but et pas d'agrandir l'image mais de faire apparaitre l'image sur la page d'accueil, entre le code du tableau et tout. Je sais pas si tu comprend ce que je veux dire ...

Ta mis background-image="Url de l'image"?

J'ai fait face à ce problème. Il s'avère que les codes et citations coupent l'image. Vérifie si c'est le problème.

edit: Moi je me demandais s'il était possible de changer l'opacité des images que l'on mettait dans ce code.

Sui, voila le code que j'ai utilisé a partir de ce que tu ma conseillé :

Code:

<div style="background-image="http://img519.imageshack.us/img519/7207/bannol1xj5.png" center no-repeat;">TON TEXTE</div>

Mitsuomi, ton problème c'était pour posté un sujet et placé le code, le mien c'est pour la page d'accueil déja codé mais merci pour tes conseil.

Sui, si tu as une solution fait moi signe

Et comme sa?



Le code:

Code:

<div style="overflow: auto; background-image: url(http://img519.imageshack.us/img519/7207/bannol1xj5.png); background-position: center center; width: 400px; height: 150px;">BLABLABLABLABLABLABLABLABLABLA
</div>


Le code fonctionne avec l'image mais moi je veux par exemple placé un render en fond de page d'accueil derrière la page d'accueil déjà codé tu vois ce que je veux dire ?

Bah je pense que se procédé marche suffit que tu retire le texte et que tu encadre tout ton codage de page d'accueil par le code que je t'ai passé.

En gros tu met sa au tout début:

Code:

<div style="overflow: auto; background-image: url(http://img519.imageshack.us/img519/7207/bannol1xj5.png); background-position: center center; width: 400px; height: 150px;">

et à la fin du ferme avec sa:

Code:

</div>

Merci pour ton aide mais voila je vais faire voir un exemple :



Tu voi l'image ?



Tu vois le fond n'est pas surligné, et je voudrai un code pour ca car le code que tu m'as donné agrandissait ma page d'accueil quand j'agrandissais la taille, elle ne voulait pas rester seulement au fond. Voila j'espère que c'est plus clair ma demande.

C'est très simple, il suffit que tu diminues la taille de ton image. Sinon, la page d'accueil prendra la dimension de ton image.
En espérant que sa aidera et que je n'ai pas répondu pour rien parce que le sujet date de longtemps quand même.. ^^'