Adding a Background Image to Your Joomla Articles

Here's how you can achieve this

 

In this tutorial we are going to show you how to add a background image to an article on your website with some CSS code. The code is inserted into your article itself. You can use the sample code provided to apply this CSS background individually to articles that you choose so we are not going to insert any code into our template to apply it universally to all articles. This will give you more freedom of choice by easily applying different backgrounds and styles to articles that you choose.

You may have to insert the sample code into your content without using your WYSIWYG Editor, becasue some configurations of WYSIWYG will strip out or alter your code so you do not get the desired result ( They are evil little things at times )

If you look at the bootom of this page, you will see an example of how this same code is applied to a custom Html module to manipulate the background.

Here is the code that was used in this article, Replace all the plus signs " + " with " < " or " > " as required.
+div class="floatbox" style="background: transparent url(FULL PATH TO IMAGE.png) repeat scroll 0% 0%; width: 700px; height: 497px;">
+div align="left">+/div+
+div style="margin: 0px;">
+div align="left">+/div+
Here's how you can achieve this

In this tutorial we are going to show you how to add a background image to an article on your website with some CSS code. The code is inserted into your article itself. You can use the sample code provided to apply this CSS background individually to articles that you choose so we are not going to insert any code into our template to apply it universally to all articles. This will give you more freedom of choice by easily applying different backgrounds and styles to articles that you choose.

+/div+

+/div+



Saturday, 11 December 2010 Posted in Tutorials

Leave a comment

You are commenting as guest.

Premium Membership