web-dev-qa-db-ja.com

記事の背景画像を挿入する

私は私のウェブサイトのすべての記事に背景画像を入れようとしています。現時点では、joomla記事の本文にdivタグをハードコーディングすることでこれを実現しています。

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

これは以下を生成します

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

（ウォーターマークとして機能するように会社のロゴを繰り返す）

ヘッダーモジュールまたはフッターモジュールにdivタグを挿入することでこれを達成できると思いましたが、これらのモジュールにdivタグを配置すると、ヘッダーまたはフッターのスコープ内でのみ背景画像が出力されます。

経験豊富なJoomlaの人なら、これを正しく行う方法を教えてもらえますか？ 60以上の記事があるので、同じ背景画像を適用する必要があります。

みんなありがとう。

joomla-3.xarticles
2
Will Kim

これはCSSを通じて実現できます。 CSSに以下を追加します。

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

私はあなたのウェブサイトでGoogle Chrome=を試してみましたが、うまくいきました。

変更が有効になるように、ブラウザのキャッシュをクリアしてください。

1
itoctopus

Itoctopusの回答の補足または代替として、さまざまなメニューアイテムにさまざまな背景を設定することもできます。メニューアイテムのページクラスサフィックスパラメータを使用して、新しいCSSクラスを作成し、CSSファイルにスタイルコマンドを追加できます（Joomla！docs）

2
n.h.

@ n.hを拡張する。投稿し、あなたのコメント-質問に答えてくださいこれはこれがどのように機能するかです：

メニュー項目のページクラスサフィックスを追加すると、ほとんどのテンプレートは、通常はすでにitem-pageクラスを持っている記事のラッパーdiv要素にこの追加のcssクラスを追加します。

したがって、そのメニュー項目について：

<div class="item-page">

となります：

<div class="item-page yourCustomClass">

既存のitem-pageを連結する代わりに、カスタムクラスをそのdivの2番目のクラスとして追加するには、メニュー項目のページクラスサフィックスフィールドにカスタムクラスを入力するときにスペースを空ける必要がある場合があることに注意してください。クラス。

次に、必要なのは、CSSを使用して、次のような特定のページの記事領域をターゲットにすることです。

/* 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);
}

Bg画像をターゲットにしたい場合は、.article-content div要素、他の要素、または.item-page全体を自由に選択できます。また、得られる結果によって異なります（サイトを検査していません）。

2
FFrewin