Une image de fond dans le champ de rédaction d'un message Bouton_activeUne image de fond dans le champ de rédaction d'un message Bouton_hoverUne image de fond dans le champ de rédaction d'un message Fb-hoverUne image de fond dans le champ de rédaction d'un message Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Structure de Qui Est En Ligne (1)
Une image de fond dans le champ de rédaction d'un message EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Une image de fond dans le champ de rédaction d'un message EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Une image de fond dans le champ de rédaction d'un message EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Une image de fond dans le champ de rédaction d'un message EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Une image de fond dans le champ de rédaction d'un message EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
Une image de fond dans le champ de rédaction d'un message EmptyMar 07 Fév 2023, 08:40 par Oxtran

» Mettre votre © Copyright dans le footer de votre forum
Une image de fond dans le champ de rédaction d'un message EmptyMar 07 Fév 2023, 07:35 par Oxtran

» Barre(s) Hitskinienne
Une image de fond dans le champ de rédaction d'un message EmptyVen 03 Fév 2023, 17:22 par Krager

Le Deal du moment :
Nike : Jusqu’à 50% sur les articles de ...
Voir le deal

Partagez
 

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

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://le-site-milouze14.bbactif.com/forum.htm
Milouze14
Milouze14
{ Membre }
{ Membre }

Masculin Messages : 26



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

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 cheers cheers !

Bien à vous.
Milouze14

MessageSujet: 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 EmptyMer 08 Déc 2010, 06:37
Revenir en haut Aller en bas
http://www.i-love-harvard.com/
Kaiji
Kaiji
Blanche-Neige
Blanche-Neige

Féminin Messages : 5578



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


Q
//

R
//


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml
MessageSujet: Re: 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 EmptyMer 03 Aoû 2011, 09:04
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Une image de fond dans le champ de rédaction d'un message Empty
21-07-2012 : Tutoriel revu et mis à jour
MessageSujet: Re: 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 EmptySam 21 Juil 2012, 09:26
Revenir en haut Aller en bas
http://www.eshana.org
flo la bleue
flo la bleue
{ Membre }
{ Membre }

Féminin Messages : 50



Une image de fond dans le champ de rédaction d'un message Empty
Merci pour ce tuto Wink
MessageSujet: Re: 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 EmptyDim 16 Sep 2012, 13:18
Revenir en haut Aller en bas
http://cityofpub.forumactif.org/
Redbird49
Redbird49
{ Membre }
{ Membre }

Féminin Messages : 78



Une image de fond dans le champ de rédaction d'un message Empty
Merci Smile
MessageSujet: Re: 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 EmptyLun 12 Nov 2012, 08:34
Revenir en haut Aller en bas
http://www.edspeleersaddicts.com
Edward Speleers
Edward Speleers
{ Spécialiste }
{ Spécialiste }

Masculin Messages : 1799



Une image de fond dans le champ de rédaction d'un message Empty
C'est trop cool, merci^^
MessageSujet: Re: 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 EmptyDim 16 Déc 2012, 10:12
Revenir en haut Aller en bas
http://google.fr
LastWords
LastWords
{ Membre }
{ Membre }

Masculin Messages : 29



Une image de fond dans le champ de rédaction d'un message Empty
Super, merci ! :-)
MessageSujet: Re: 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 EmptyLun 08 Avr 2013, 08:26
Revenir en haut Aller en bas
Aiolus
{ Membre }
{ Membre }

Masculin Messages : 3



Une image de fond dans le champ de rédaction d'un message Empty
Merci cheers
MessageSujet: Re: 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 EmptyMer 01 Juil 2015, 22:08
Revenir en haut Aller en bas
Contenu sponsorisé




Une image de fond dans le champ de rédaction d'un message Empty
MessageSujet: Re: 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 Empty
Revenir en haut Aller en bas
 

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

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Image de fond dans un message
» [résolu] image de fond rédaction texte
» Déposer une image dans le module de rédaction (messages)
» Image de fond dans la PA.
» Image de fond dans les cellules

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: ForumActif Pas à pas :: Les Messages-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit | Informatique et Internet | Internet