web-dev-qa-db-fra.com

insérer une image de fond pour les articles

J'essaie de mettre une image de fond dans tous les articles de mon site Web. Pour le moment, j'y parviens en codant en dur la balise div dans le corps de mon article sur joomla.

<p>{loadmodule mod_custom,ACADEMIC}</p>
<div style="background-image: url('images/M34Algebra/Academicv5.png');">
<!- content  ->
<!- content  ->
{loadmodule mod_custom,NOTES FOOTER}</p>
</div>

qui génère le suivi

http://elitemaths.com.au/vce-study-materials/10-methods34/57-a00-the-number-system-notes.

(répétition du logo de la société afin qu’elle puisse servir de marque de l’eau)

Je pensais pouvoir y parvenir en insérant la balise div dans le module d’en-tête ou le module de pied de page, mais en plaçant la balise div dans ces moudules, l’image d’arrière-plan ne sort que dans le cadre de l’en-tête ou du pied de page.

Est-ce que des gars expérimentés de Joomla peuvent me dire comment faire cela correctement? Comme j'ai plus de 60 articles de ce type, je dois appliquer la même image de fond.

Merci beaucoup les gars.

joomla-3.xarticles
2
Will Kim

Vous pouvez y parvenir via CSS. Dans votre CSS, ajoutez ce qui suit:

.article-content{
    background-image: url(/images/M34Algebra/Academicv5.png);
}

Je viens d'essayer ce qui précède sur votre site Web dans Google Chrome et cela a fonctionné.

Assurez-vous d'effacer le cache de votre navigateur pour vous assurer que les modifications prennent effet.

1
itoctopus

En complément ou en alternative à la réponse itoctopus, vous pouvez également avoir différents arrière-plans pour différents éléments de menu. Vous pouvez utiliser le paramètre suffixe de classe de page de l'élément de menu pour créer de nouvelles classes CSS, puis ajouter des commandes de style dans le fichier CSS (Joomla! Docs).

2
n.h.

Pour prolonger @ n.h. postez et répondez à votre question-comment voici comment cela fonctionne:

Lorsque vous ajoutez un suffixe de classe de page pour un élément de menu, la plupart des modèles ajoutent cette classe css supplémentaire à l'élément wrapper div de l'article, qui contient généralement déjà la classe item-page.

Donc pour cet élément de menu:

<div class="item-page">

va devenir:

<div class="item-page yourCustomClass">

Notez que vous devrez peut-être laisser un espace lorsque vous tapez votre classe personnalisée dans le champ suffixe de classe de page pour l'élément de menu, afin que votre classe personnalisée soit ajoutée en tant que seconde classe sur cette div, au lieu de concaténer le item-page Classe.

Ensuite, tout ce dont vous avez besoin est de cibler avec votre CSS la zone d'article de ces pages spécifiques avec quelque chose comme:

/* Page 1 bg */
.item-page.yourCustomClass1 .article-content div {
    background-image: url(/images/bgImage1.jpg);
}

/* Page 2 bg */
.item-page.yourCustomClass2 .article-content div {
    background-image: url(/images/bgImage2.jpg);
}

Si vous souhaitez cibler pour votre image bg l'élément .article-content div, Les autres éléments ou l'ensemble .item-page, Vous le souhaitez et dépend aussi des résultats que vous obtenez (je n'ai pas inspecté votre site ).

2
FFrewin