In this lesson, I’ll explain how to use another background image and background color. It is assumed you have created and are using an override.css file as explained earlier.
Beez20 has a background image(USED ONLY FOR THE UPPER PART OF THE TEMPLATE) and just in case you want to use your own background image, or totally remove it heres how.
Note, if you are just interested in changing the complete background “color”, regardless of the image used, refer to #3 in previous link(above link) and don’t bother about all the below.
a) To change the background image:
Copy paste lines #18-23 from personal.css into override.css
body { background: #e0dedf url(../images/personal/bg2.png) repeat-x; color: #333; font-family: arial, helvetica, sans-serif; }
Explanation: (note: this we are editing override.css)
bg2.png is the template’s background image. It is located at : \beez_20\images\personal\bg2.png. It is grayish to match the lower part of the template, also a grey color “e0dedf”(above code). To use your own image, create a new image, sized 20x600 (.png), copy and paste to replace the original image.
For this exercise, I created an image, copy and pasted it to replace bg2.png. My image is all red. Here is how my template looks like.
Note that the lower part of the template is still grey colored: “e0dedf” – above code.
b) To remove the background image completely, just rename this line:
background: #e0dedf url(../images/personal/bg2.png) repeat-x;
To something like this:
background: #e0dedf url(../images/personal/bg2XYZ.png) repeat-x;
The template then takes this:
background: #e0dedf ;
as its background color. You can make changes to suit your fancy.
