karenak Crown



Here's the Categorian Beginner's First Aid Kit - Part Three



Background Image for Blog Posts

Step 1


If you click "Style" the following code (or something similar if you already made changes) will be shown:


body { background-color: white; color: black; }
a { color: blue; }
.invertlink { background-color: blue; color: white; }
div.hairline { border-color: silver; }
.review div.bar { background-color: lightgrey; }
.review div.text { font: normal 100% arial,helvetica,sans-serif }



Step 2


We already know how to set the page background image. (See Part Two). Now, depending on what kind of image you chose, you will want to add a background to your reviews so the text can be read and your photo-blogging looks good.

Easily done:

We will add a new line to the style sheet.


body { background-color: white; color: black; }
a { color: blue; }
.invertlink { background-color: blue; color: white; }
div.hairline { border-color: silver; }
.review {background-image: url( path to your picture );}
.review div.bar { background-color: lightgrey; }
.review div.text { font: normal 100% arial,helvetica,sans-serif }



This simple line will fill each blog post with that background image.

Of course you can also just select a color. In that case the line would read:


.review {background-color: Name or Hex-Code of the color;}




About semi-transparent images:

In order to make the background of your reviews semi-transparent, you need to either download such an image or make one yourself in one of the many online photo editors. Pixlr.com is one such - my favourite.

Save the image as .png


Please note: Old Internet Explorer versions cannot display that transparency.


Step 3

Click the SAVE button and have a look :-)




>>>> Part Three /a