Adding or changing the background colour/image on your Joomla! site is very easy, and can be used to get some great effects which can drastically alter the way the entire website looks.

Backgrounds are normally configured in your default template's main CSS file.  You can opt for a flat colour; an image or a repeated image - and because it's so quick and easy, you can experiment with different style to see which one fits your taste.

To get started, log on to your site Administrator, and open the Template Manager in Site->Template Manager->Site Templates.

Click the radio button next to your default template, then click the "Edit CSS" button in the top-right.

Near the top of the file, locate the following CSS type selector definition:

html {

You may already have some information below this line.  The important one for us is the "background" definition.  There are several CSS variations for background which may or may not be used in this selector:

background-color
background-image
background-repeat
background-attachment
background-position

For the benefits of compatibility and ease of typing, we will use the simple background: definition which can include all of the above statements in a single line.

So, so set a background colour:

html {
background: #aaa;
}

 That will give us a nice mid-grey colour over the entire background page.  Pretty easy!  Remember - if you have other entries after html { - leave them in place!

Now lets add a background image:

html {
background: url(my_background.jpg);
}

Of course, you may need to experiment with image dimensions to make it fit into your site.  You can also fix the background in place (so that it won't scroll around with the page) by adding fixed in the definition, for example background: url(my_background.jpg) fixed;.

Many backgrounds are tiled, using this method enables you to use a very small image which is repeated across the whole page.  To do this, simply add repeat-x or repeat-y to the definition: 

html {
background: url(my_background.jpg) repeat-x;
}

---

Tag this article:

Comments (1)

Only registered users can write comments.
Please login or register.

Powered by AkoComment Tweaked Special Edition v.1.3.0