Add image to left of text via css

Question

How can I add an image to some text via css?

I've got this:

<span class="create">Create something</span> 

and I want to add a 16x16 image to the left of that by using css. Is this possible or should i just manually add this image like so:

<span class="create"><img src="somewhere"/>Create something</span> 

I'd rather not have to manually change all of the places which is why I wanted to do it via css.

thanks!

Answer 1

.create { background-image: url('somewhere.jpg'); background-repeat: no-repeat; padding-left: 30px;  /* width of the image plus a little extra padding */ display: block;  /* may not need this, but I've found I do */ } 

Play around with padding and possibly margin until you get your desired result. You can also play with the position of the background image (*nod to Tom Wright) with "background-position" or doing a completely definition of "background" (link to w3).