How do I put a background Image or Background Colour to my Joomla! (TM) Article?

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

Enter the code at the very beginning of the article:

If you want an image as a background then type:

div style="background-image: url('/images/directoryname/filename')"

The directoryname being the name of the directory where you image is stored in Joomla! and the filename being the name of your image. Also put < just before the word div and > after the " at the end of the line so that the code is wrapped between these chevrons

If you want a colour for a background then type:

div style="background-color:#dddddd"

Substitute your desired color in the code above.  Also put < just before the word div and > after the " at the end of the line so that the code is wrapped between these chevrons

If you are using the TinyMCE editor, you do not need to add the closing tag at the end of the article, since TinyMCE will add this for you automatically.

Please note: That there is a quirk in Joomla! so you will probably need to navigate to the User Manager by selecting the Site menu option and changing the editor to "No Editor" as sometimes in an Article when you add HTML and Save, the editor strips your HTML out of the Article. When you have added your HTML and saved your article you can then revisit the User Manager and set your editor back to what it was

If you want to get started quickly then Subscribe to my Free Joomla! Tutorials by clicking on the link below:

Get your FREE Joomla! Tutorials now by clicking this link!