Bandeau

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon... et de qui veut.

Forum de l’article

Edito

Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.
Attention ! Si votre message contient un lien, il devra être validé par le webmestre.

Ajouter un document

Rappel de la discussion
Mettre un fond dans la noisette
Sylvain Le Doaré - le 12 novembre 2019

Bonjour,
J’aurais voulu mettre un fond dans cette noisette.
Je pense qu’il faut passer par un bout de code CSS à mette dans perso.css
Mais je ne vois pas comment faire.
J’ai tenté certains trucs qui ne marchent pas.
Merci de votre aide
Sylvain

et pour quelques lignes de css en plus...
y-forums - le 12 novembre 2019

Il faut que tu passe par un click droit sur le zone concernée une fois qu’elle est sélectionnée et là tu vois le style qu’il faut mettre dans perso.css.
Si tu nous donnais l’url de ton site on pourrais même te dire lequel 😉
Si je fais ça ici, sur actualités, j’ai :

cadre-couleur h1.cadre {
    background-color: #82ADE2;
    color: #000000;
}

Bonne soirée,
Yves

Image de fond sur la noisette edito
Sylvain Le Doaré - le 12 novembre 2019

Bonsoir,
Voilà l’URL : club-interloisirs-conflans.org

Je n’ai pas trouvé ou je n’ai pas compris ce que tu dis !
A+
Sylvain

Mettre un fond dans la noisette
Jean Christophe Villeneuve - le 12 novembre 2019

Ce qu’il tentait  😉 de t’expliquer, c’est qu’avec Firefox, un faisant un click droit sur une zone d’un site puis en cliquant sur "Examiner l’élément" on peut avoir des infos sur les css utilisées, ce qui peut permettre ensuite de cibler cette zone avec des css dans perso.css

Super pratique quand on connaît un peu le html et le css !
On peut même tester des trucs en live.

Mettre un fond dans la noisette
Jean Christophe Villeneuve - le 12 novembre 2019

Hello

Imaginons que ton image de fond s’appelle mon_image.jpg et qu’elle soit dans le dossier /squelettes

Dans perso.css, tu mets ceci

.edito.texte{
	background: url(../images/mon_image.jpg) no-repeat;
	background-size: 100%;
}

Le problème c’est qu’il va être très difficile d’adapter l’image à la hauteur du bloc qui sera variable en fonction du texte qu’il contient.

Image de fond sur la noisette edito
Sylvain Le Doaré - le 12 novembre 2019

Bonsoir,
J’avais bien fait. Le problème c’est que je ne voyais pas comment utiliser les infos obtenues pour les mettre dans perso.css.
Quand je disais que j’avais tenté plusieurs trucs, c’était en partant de l’inspection par Firefox et l’examen des divers fichiers du squelette Escal.
Merci pour ta solution.
Cependant voilà le code que j’ai mis et qui marche bien

.edito.texte{
    background-image: url("../images/mon-image.png") ;
    background-repeat: no-repeat;
    background-size: contain;
}

le no-repeat à la fin de bakground-image ne fonctionne pas.

Merci à tout le monde
Sylvain

Mettre un fond dans la noisette
Jean Christophe Villeneuve - le 12 novembre 2019

Oops, le code proposé fonctione si l’image est dans /squelettes/images

Sorry

Derniers commentaires

Modifier un texte
Ok c’était bien ça, cool. A l’avenir, utilises plutôt un éditeur de code plutôt que LibreOffice, (...)

Modifier un texte - suite et fin -
Super, c’est réparé Les apostrophes inclinés venaient de LibreOffice ! Encore (...)

Modifier un texte
Hello Je pencherais pour les apostrophes qui sont incurvées au lieu d’être droites car je ne vois (...)

Modifier un texte
Le fichier ci-dessous déposé dans le répertoire lang ne passe pas. "Parse error : syntax error, (...)

images dans un article
Bonjour Jean Christophe, non, je n’ai pas accès à ce fichier ; le répertoire /config ne m’est pas (...)

Plan du site Contact Mentions légales Données personnelles et cookies Espace privé squelette RSS

2009-2024 © Escal - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 4.6.2