insert background image for articles

Question

I am trying to put a background image into all articles on my website. At the moment I am achieving this by hard-coding the div tag into the body of my joomla article.

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

which generates the folloiwng

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

(repeating company logo so it can serve as a water mark)

I thought I could achieve this by inserting the div tag in either the header module or the footer module but putting the div tag in these moudules outputs the background image only within the scope of the header or the footer.

Can any experienced Joomla guys tell me how to do this properly? As I have over 60+ such articles I need to apply the same background image to.

Many thanks guys.

Answer 1

You can achieve this through CSS. In your CSS, add the following:

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

I just tried the above on your website in Google Chrome and it worked.

Make sure you clear your browser cache to make sure that the changes take effect.

Answer 2

As a complement or alternative to itoctopus answer you can also have different backgrounds for different menu items, you can use the page class suffix parameter of the menu item to create new CSS classes and then add styling commands in the CSS file (Joomla! docs)

Answer 3

To extend @n.h. post, and answer your comment-question this is how this works:

When you add a page class suffix for a menu item, then most templates will add this extra css class on the wrapper div element of the article, which usually has already the class item-page

So for that menu item:

<div class="item-page">

will become:

<div class="item-page yourCustomClass">

Note, that you might have to leave a space when you are typing your custom class in the page class suffix field for the menu item, in order to have your custom class added as a second class on that div, instead of concatenating the existing item-page class.

Then all you need is to target with your css those specific pages' article area with something like this:

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

If you want to target for your bg image the .article-content div element, other elements, or the whole .item-page is up to you and also depending on the results you are getting ( I haven't inspect your site ).