Beez20 Template Help – Adding a Background Image

by Elaine on June 10, 2011

I sure hope Joomla 1.6 Beez20 template will be around for a while because I’ve written a lot about this template.   I was asked how to add an image to the background of the Beez_20 template.  There are 2 different backgrounds you can change.   You can play around with the 2 and see which one you prefer. They are:

  • The background of your site
  • The background of your content area

I’ve listed steps below to change both for your Beez_20 Joomla 1.6 Template.  So for example:

I want to change my background to have an image of  ../images/personal/flowers.gif

Steps to Change the Background of Your Site

1.  Login to your FTP file manager

2  Make a backup of your file – /templates/Beez_20/css/personal.css

3.  Edit the file /templates/beez_20/css/personal.css

4.  Find the following code:

body
{
background: #e0dedf  url(../images/personal/bg2.png) repeat-x;

5.  Add the code in red and change the code in italics with your image file:

body
{

/* background: #e0dedf  url(../images/personal/bg2.png) repeat-x; */
background: #e0dedf  url(../images/personal/flowers.gif) repeat-x;

6. Save the file and Refresh your Joomla 1.6 website.

Steps to Change the Background of Your Content Area

1.  Login to your FTP file manager

2.  Edit the file /templates/beez_20/css/personal.css

3.  Find the following code:

#contentarea,
#contentarea2
{
background:#fff

4.  Add the code in red and change the code in italics with your image file:

#contentarea,
#contentarea2
{
/* background:#fff */
background: #e0dedf url(../images/personal/flowers.gif)

5.  Save the file and refresh your Joomla 1.6 website.

You will see the Joomla 1.6 content area sits on top of the site background.  So if you need to change any of the code back just remove any of the code you added in red or restore your backup personal.css file.

Thanks!

Elaine

Elaine@cmsmind.com

 Beez20 Template Help   Adding a Background Image

Elaine

Elaine is the founder of CmsMind, an online blog providing Joomla and Wordpress tutorials. Elaine lives in Toronto and when she is not online, she is either Marathon and Triathlon training or travelling and racing somewhere in the world. Find her also at: Save Money, Premium Themes and Templates, and at Webhosting Tips.

More Posts - Website

{ 2 comments… read them below or add one }

Stephanie August 8, 2011 at 11:29 pm

Hello! I would like to change the width and height of the header in beez20, and I would like to make the header an image. The site I am working on is not locally hosted: It was set up by someone else, and I do not have access to his computer. Therefore, where on earth do I find the templates\images\ folder that I keep reading about–and how do I use an FTP manager to update css files?

Reply

silviu December 30, 2011 at 5:04 pm

It doesn’t work. The image will appear only on the upper side of beackground.

Reply

Leave a Comment

Captcha Captcha Reload

Older Post:

Newer Post: