You can place a background image or color in an article by following these steps:
- Open the article for editing with TinyMCE or another editor.
- Press the “Edit HTML Source” button and enter the code indicated below at the very beginning of the article:
-
-
- For an image:
<div style="background-image: url('images/stories/key.jpg')">
- For a color:
<div style="background-color: #dddddd">
-
Substitute your desired image or color in the code above. If you are using the TinyMCE editor, you do not need to add the closing </div> tag at the end of the article, since TinyMCE will add this for you automatically. If you want to control the style from the CSS file, you can insert a class attribute instead of a style attribute. For example, follow steps (1) and (2) above, except insert this code:
<div>
Then open the CSS file (normally <Joomla! home>/templates/CSS/template.css) and add something like:
div.mynewclass { background-color: red; }
If you want to have different backgrounds for different Menu Items, you can also use the Page Class Suffix parameter of the Menu Item to create new CSS classes and then add styling commands in the CSS file.