Une image de fond dans le champ de rédaction d'un message

Une image de fond dans le champ de rédaction d'un message

Informations générales

Description :: Il s'agit ici de placer une image de fond dans le module de rédaction des messages du forum, comme une sorte de fond d'écran, de "background" décoratif !
Démo :: Démonstration en image
Testé sur :: Firefox, Chrome, Safari, Opera, Internet Explorer
Crédits :: Proposé par Milouze14 le 08/12/2010 | Validé par Teal'
Mise(s) à jour :: Mise à jour le 19/12/2012 par Espeon

Le tutoriel

L'astuce suivante ne fonctionne pas (forcément) dans le mode WYSIWYG pour la simple et bonne raison que ce mode n'est pas géré de la même façon par les différents navigateurs :

Firefox supporte le mode WYSIWYG avec une iframe, rendant impossible la personnalisation du background
Chrome, Safari et Opéra ne supportent pas le mode WYSIWYG sous FA, donc pas de question à se poser
IE semble supporter l'effet dans les 2 modes

Cela peut expliquer, notamment si vous êtes sous Firefox, que le background ne s'affiche que si vous basculez en mode texte.

Le code

Rendez-vous simplement dans votre feuille de style CSS personnalisée de la manière suivante :
Panneau d'Administration > Affichage > Images & Couleurs > Couleurs > Feuille de style CSS

Puis, ajoutez ceci et validez :

Code:: textarea#text_editor_textarea {
background-image: url('ADRESSE DE VOTRE IMAGE'); /* VOTRE IMAGE */
background-repeat: no-repeat; /* IMAGE NON REPETEE */
background-position: center center; /* IMAGE CENTREE */
background-color: #xxxxxxx; /* COULEUR DE FOND */
border: #xxxxxx 2px solid; /* COULEUR DE BORDURE */
color: #xxxxxx; /* COULEUR DU TEXTE */
}

Les variables

background-image : indiquez l'url de votre image, tout simplement
background-repeat : no-repeat évite que l'image de fond soit répétée. Mais il existe aussi repeat-x (image répétée horizontalement seulement), repeat-y (verticalement seulement) ou repeat (horizontalement et verticalement pour remplir tout le bloc, par défaut).
background-position : position de l'image de fond horizontalement et verticalement, ici centrée mais vous pouvez aussi combiner left/center/right et top/center/bottom. Par exemple, bottom center placera l'image en bas au milieu du bloc.
background-color : définit la couleur de fond (ici en hexadécimal mais il est possible de mettre une valeur telle que red, black ou green par exemple).
border : définit la bordure (couleur, épaisseur, style)
color : définit la couleur du texte.

Libre à vous de modifier les paramètres (position de l'image, couleur de la police, de fond, de la bordure, ...) selon vos goûts et vos envies. S'il y a des paramètres par défaut que vous souhaitez conserver (par exemple la couleur de fond, la bordure et le texte), vous pouvez également ne pas mettre les lignes correspondantes dans votre CSS : celles par défaut seront prises en compte.

Et voilà le tour est joué cheers