Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

Créer un fond de couleur ou mettre une image...


Morgans
 Share

Messages recommandés

Bonjour à toutes et à tous,

 

Je voudrais savoir s'il est possible de mettre une image en fond d'un sujet réalisé pour un forum ou sa bibliothèque si oui quel est le code ?

 

 

Peut on également faire de même mais au lieu d'une image changer la couleur de fond ?

 

J'ai essayé cette formule ne colore chaque lignes de texte mais pas les intervalles...a <span style="background-color: COLOR;">{TEXT}</span>

 

 

Merci d'avance j'aimerai bien personnaliser les sujets que je crée et que je poste justement soit par une image pastel ou une autre couleur que le bleu ciel...

 

 

 

Morgan

Lien vers le commentaire
Partager sur d’autres sites

Bonjour Morgan, ;)

 

Tout d'abord, il est nécessaire que le forum accepte une codification HTML des messages… ce qui n'est pas le cas de Zébulon. Et c'est compréhensible, au vu des risques de désorganisation de la présentation des pages (conflit avec le code HTML du gestionnaire de forum lui-même)…

 

Ensuite, pour ton problème de couleur de fond, utilise plutôt la balise <div> que la balise <span>. L'inconvénient, c'est que l'ouverture d'un bloc <div> provoque automatiquement un saut à la ligne. Mais je pense que tu obtiendras l'effet souhaité ! ;)

 

<div style="background:#FF99CC url(MonImage.jpg) no-repeat fixed center;color:#990000;">Mon texte</div>

Voir les attributs de la propriété background (ci-dessus, la propriété abrégée).

Lien vers le commentaire
Partager sur d’autres sites

Bonjour Dylav

 

Merci pour tous ces renseignements simplement je ne comprends pas. Je dois utiliser la phrase telle que tu l'as mise ou bien comporte-t-elle les deux options ? L'option pour le fond couleur ou l'option pour l'image de fond texte...

 

En tout cas merci pour ta gentillesse...

Bonne journée

Morgans

Lien vers le commentaire
Partager sur d’autres sites

Bon, je détaille (mais tu aurais pu aller voir la syntaxe, au bout du lien que je t'indiquais)… ;)

 

La propriété background est un abrégé de la somme des propriétés background-color (#FF99CC dans mon exemple), background-image (MonImage.jpg), background-repeat (no-repeat), background-attachment (fixed) et background-position (center). Ensuite, j'ai ajouté la propriété color (#990000) qui n'a rien à voir : il s'agit d'indiquer la couleur à donner au texte dans ce bloc <div>.

 

En d'autres termes, l'écriture complète du background serait,

 

<div style="background-color:#FF99CC;background-image:url(MonImage.jpg);
background-repeat;no-repeat;background-attachment:fixed;
background-position:center">Mon texte</div>

Sachant que tu n'es pas obligée de citer toutes les propriétés, chacune prenant une valeur par défaut si tu n'en imposes pas. Tu peux te documenter plus complètement en consultant le lien indiqué (il s'agit d'une traduction française de la norme CSS officielle du W3C).

Lien vers le commentaire
Partager sur d’autres sites

Bonjour Dylav,

 

Merci pour tous ces renseignements je vais essayer de placer la formule que tu as eu la gentillesse de ma donner ! j'ai regardé les liens que tu as mis mais bon je ne comprends pas encore grand chose... c'est loin d'être évident pour une débutante comme moi...

Merci beaucoup à toi...C'est très gentil de ta part...

 

Bonne journée

Morgans

Lien vers le commentaire
Partager sur d’autres sites

Bonjour Morgans, salut cousin Dylav ;)

 

Penser que sur le site il y a des personnes qui n'ont plus 20 ans, les couleurs claires sur fond blanc sont difficile a lire (nombreuses revues qu je n'achète plus pour cette raison) , heureusement avec le module NoColor on contourne le problème :)

Lien vers le commentaire
Partager sur d’autres sites

Bonjour Morgan, cousin Leminou,

 

Il est vrai que la couleur que tu as adoptée pour rédiger ton message n'est pas assez contrastée par rapport à la couleur de fond. D'autant plus que la police « Monotype Corsiva » présente le double inconvénient d'être avec sérif (petits traits aux extrémités des lettres) et en italiques, deux caractéristiques déconseillées sur écran, parce qu'elles compliquent la lecture.

 

Ceci dit, je dois reconnaître que tes messages ont « de la gueule », sur le plan esthétique :super:

 

Mais, pour en revenir à la question qui te préoccupe, le « langage » CSS (Cascading Style Sheet) n'est pas si compliqué que cela et puis c'est passionnant, de réussir une mise en forme esthétiquement plaisante grâce aux moyens mis à ta disposition par HTML et CSS ! :sourire:

Lien vers le commentaire
Partager sur d’autres sites

Bonjour Dylav, Leminou,

 

Tout d'abord mille excuses Leminou je dois reconnaître que je cherche avant tout une certaine forme esthétique à mes messages je vais faire très attention dorénavant... Encore toutes mes excuses...

 

Merci Dylav pour ton appéciation merci aussi pour les formules que tu as eu la gentillesse de me donner ça marche parfaitement pour les fonds et comme il y a grand choix de couleur je m'en donne à coeur joie...

 

Simplement je n'arrive pas à placer de photo en fond de sujet... en fait les photos téléchargées ont pour Adresse par exemple Morgans.jpg elles sont toujours enrégistrées sous cette forme avec un nom au choix suivi de ".jpg" j'ai donc essayé la formule suivante à partir de tes données :

<div style="background-color:#FF99CC;background-image:Morgans.jpg;background-repeat;no-repeat;background-attachment:fixed;

background-position:center">Montexte</div>

 

Je pense qu'il doit y avoir une subtilité que je n'ai vu ni comprise, ça m'énerve d'être aussi nulle... Où alors peut que ce n'est pas possible d'illustrer un texte avec une photo rendue pastelle en fond...

 

Encore merci pour tout

et Bonne journée !

 

Morgans

Lien vers le commentaire
Partager sur d’autres sites

Bonjour Morgans,

 

Comme je te l'indiquais dans mon message #4 du 2 septembre, la syntaxe de la propriété background-image est,

 

<div style="background-image:url(\"CheminDeMonImage/MonImage.jpg\");">

--- ou ---

<div style="background-image:url(CheminDeMonImage/MonImage.jpg);">

Je pense que cela marchera mieux en respectant la syntaxe;)

 

Les guillemets sont facultatifs, mais conseillés. Leur présence dans une clause style déjà encadrée de guillemets oblige à les faire précéder d'un antislash (caractère d'échappement) pour lever toute confusion.

Lien vers le commentaire
Partager sur d’autres sites

Bonjour Dylav,

 

Tout d'abord merci pour le lien et les renseignements que tu as eu la gentillesse de me donner...

 

Toutefois... Oupsssss petits problèmes autant cela à été simple pour placer un fond de texte en couleur et là pour une image je dois avouer que je n'y arrive pas j'ai lu le lien et quand j'essaie de le mettre en application rien ne se passe... mon image se nomme Gtr.jpg

 

J'ai donc essayé : <div style="background-image:url(\"cheminDeMonImage/Gtr.jpg\");">et<div style="background-image:url("cheminDeMonImage/Gtr.jpg");">

et l'autre formule pas moyen non plus <div style="background-image:\"cheminDeMonImage/Gtr.jpg\";"> même avec pour les deux un </div> à la fin de mon texte...

 

J'ai beau lire le lien que tu as mis... écrit ça parait tout simple mais en pratique ça ne marche pas...

 

Encore merci à toi

Bonne journée

Morgans

Lien vers le commentaire
Partager sur d’autres sites

Join the conversation

You are posting as a guest. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

 Share

  • En ligne récemment   0 membre est en ligne

    Aucun utilisateur enregistré regarde cette page.

×
×
  • Créer...