Bonjour,
Simplement en un clic comme les installations de Moodle par Softaculous, pas possible.
Le problème d'une trame de fond, c'est qu'elle s'applique à l'entièreté de son conteneur et que quand on importe une image via l'éditeur, elle est son propre conteneur alors qu'il faudrait qu'elle devienne le fond de l'étiquette.
Sans passer par une petite rectification du code html de l'étiquette, je ne vois pas. Mais une fois l'image glissée, on peut facilement récupérer son adresse et l'intégrer dans une balise div ou p englobant le reste du code ce qui donnerait
<p style="background-image:url(l'adresse récupérée)"> tout le reste de l'étiquette </p>
Reste les options de size et de repeat qui , elles peuvent être éventuellement pré remplies dans une classe CSS et intégrées pour faciliter l'écriture et homogénéiser les rendus, sinon il faudra les indiquer aussi dans le style="".
genre dans le CSS
.repetition {background-repeat: repeat repeat;} // répète l'image en x et en y
.centre {background-position: center center; background-size: contain} // centre l'image et s'arrange pour couvrir la zone en maintenant le ratio
et dans l'étiquette
<p class="centre" style="background-image:url(l'adresse récupérée)"> tout le reste de l'étiquette </p>
ou
<p style="background:url(l'adresse récupérée) center contain"> tout le reste de l'étiquette </p>
Mais peut-être un développeur d'extension a déjà développé une routine pour cela.
Jérôme.
Bonjour Daniel, Jérôme,
En passant par l'insertion d'un tableau à une seule cellule, ça semble fonctionner. Dans les propriétés du tableau (onglet "Avancé"), on peut insérer une image de fond. Le problème reste que le tableau prend, par défaut, la taille du texte qu'il contient. Il faut donc imposer sa dimension.
A bientôt,
Patrick
M'ouais. Reste alors aussi à gérer la répétition et la déformation ...
Oh...!
Merci Patrick.
Voilà une idée comme je les aime.
Simples rapides efficaces et peu coûteuses !
Le problème c'est que dans cette page j'ai justement un tableau !!
Tableau dans tableau. Jeu de miroirs à l'infini ...?
Je vais néanmoins explorer cette piste très prometteuse dès que possible.
Car je ne peux conseiller ensuite de solution qui ne soit pas à la portée du pédago de base.
Comme moi.
Bonjour Jérôme,
Tu dis avec ta malice habituelle : "Simplement en un clic comme les installations de Moodle par Softaculous, pas possible."
Je réponds "Si seulement ! Car on serait alors libéré pour des tâches pédagogiques plus gratifiantes
Je vais tenter de mettre en pratique ce que tu dis. Merci !
J'ai bien essayé de créer ma page Html dans LibreOffice puis de faire un copier/coller du code obtenu mais cela ne donne pas de trame de fond. Même une sorte d'URL de l'image de trame n'apparaît pas. Tant pis.
PS: Pour installer Moodle avec Softaculous il faut plus d'un clic tout de même. Peut-être quatre ?
Et des petites configs complémentaires à réaliser (Bdd...)
un petit exemple pour la route ?
Ici trois partie, une sans fond, la deuxième avec un fond "responsive" puis à nouveau rien.
le code
style="background: url(adresse récupérée) no-repeat center cover;"
Merci Jérôme,
Puis-je avoir le code en mode texte de ton exemple ci-dessus ?
Je bricole mais Moodle m'élimine automatiquement ce que j'écris.
Je dois faire des erreurs dans la syntaxe...
Normal puisque je ne comprends pas ce que je fais...
en version allongée
<h3
style="
background-image : url ( n'importe quelle URL valide ) ; <- indique l'url à utiliser
background-position : center center ; <- gère la position en x et y
background-repeat : no-repeat ; <- gère la répétition en x et y
background-size : cover ; <- gère la déformation éventuelle de l'image (ration h/L)
width :100% ; <- pas franchement nécessaire
">
<b> blablabla<br>blalblabla ou bla ?<br>C'est sûr ?<br>Oui !</b>
</h3>
je suppose que l'écriture abrégée
<balise> background : url ( l'<url ) center repeat cover ; </balise>
doit donner le même résultat.
Bonjour,
Voici un essai:
(Modifié par Jérôme DEMIAUX. Écrit initialement le mercredi 10 février 2016, 08:56)
ici, dans l'éditeur HTML, emploi d'une balise DIV pour encadrer le message
<div style="background-image:url(http://e-learning-facile.com/images/trame2.jpg); background-position:center center; background-repeat: repeat repeat; background-size:cover;">
<p>Bonjour,</p>
... suite de ton message ...
</div>
Merci Jérôme !
Ça marche... presque.
La trame de fond appliquée au thème Essential avec l'option "mosaïque" donne une trame non floue.
Dans l'étiquette la trame est floue avec la méthode exposée ci-dessus.
Sans doute une question de paramètres.
Voir le résultat sur mon site en construction ICI.
Étiquette intitulée "Accès direct à vos cours".
Parce que je ne me relis pas ...
La propriété "background-size" n'a pas d'utilité ici, il faut la supprimer. l'attribut contain utilisé faisait en sorte d'agrandir (ou réduire) l'image pour la "contenir" dans le conteneur.
Pour ton site, si tu veux retrouver la même trame de fond que la page elle-même, il faudrait simplement rajouter
#page-site-index .region-main { background : transparent !important; border : none; }
dans le css personnel et ne rien faire pour l'étiquette. Le fond devenant transparent laissera visible la trame de fond de la page.
Jérôme.
Dans chaque thème (ou presque) il existe un champ denommé "css personnalisé" dans lequel on peut ajouter toutes les règles css qui nous plaisent.
Pour Essential, il est positionné en fin de page des paramètres généraux de ce thème.
Bon..soir,
C'est finalement ce que j'avais compris.
J'ai ceci. Le reste est de toi également.
Mais je ne vois pas de changements.
Daniel
