Request 2.

Adding bullet images to styles.

Request made by Jeremy.

The problem:

I would like to add a bullet icon (like bullet.gif) to the beginning of a line, (like .posttitle in my design http://www.affectus.net/freelance/jezz_two/) but i want it to not interfere with the text at all. also, would it be possible to have the bullet, as WELL as the background color of the feature? I've been trying to put it into my design with little luck. So I guess my question is about styling elements with bullets + backgrounds, like UL/OL and normal DIV's.

The Solution:

There are many ways to spice up the appearance of your stylesheet, one is to add graphics to styles. In this tutorial I am going to add this background image to a class called .posted.

Download the above image and save it into your images folder.

Open your stylesheet and create a new class called .posted. We will use the posted class as our comment information.

.posted {
background: transparent url(images/bullet.gif) no-repeat left;
padding: 0 0 0 15px;
}


When dealing with background images I split it into two sections.

background: Treat this as you would with any other background attribute. You may want colour or you may want it transparent like I have done. Transparent simply means the parent element will shine through. Transparent is default, therefore leaving background blank is fine.

url: This is how it finds your bullet image. If you put your bullet in your images folder you won't need to change this.
no-repeat is pretty straight forward, we only want the image to be displayed once, therefore no-repeat is appropriate in this situation.
left: Setting the position of the image is the most important part. The background-position lets you decide where the image should sit according to the element, ie .posted. In most cases you usually want the image to be displayed infront of the body of text and level with the text. If thats the case, use left. More info on background-position.

padding: 0 0 0 15px: All the padding is doing is simply adding 15px between the body of text coming after the image.
Zero is where the image starts, so that would mean the text would be displayed over the image.

The final result:

Download:

Working files - Contains a working version of this tutorial.