We all post images with in our posts, and some times we need to label this images, but not all of us can use graphic editors or don’t just have the time to do it, so we’ll learn in this tutorial how to label our images using a small code with out using any photo editing soft wares.

you can look at the following image to see how the label will look like,

If you checked the image and the text you’ll find that the text is not a part of the the image but it added on the image as a second layer,
you can try to select it to make sure.

the code to do it is too easy but to use it you need to know

1. Image width and height in pixels.

2. Image Url ( Sample: http://www.ImageHostingSite.com/file/image.jpg)

Now when you going to write your post, you must notice that on the post writing window there are two modes, Compose and Edit Html.

Check the following image.

you’ll start write you post in Compose mode and once you want to add an image Labeled to your to your post you’ll change your posting mode to Edit Html.

And enter the next code,

My Label

And this code is the same one used here on this tutorial for the image sample.

and here is what you will need to change in the code,

width: Put your image width

height: Put your image width

background:url(Image URL Here) Put your image url without any spaces

color:#ffffff change the -ffffff- to your favorite color, you can get your color code from our html color code generator here

font-size:30px Change 30px to any size you want.

line-height:3em Your label position on the image, change 3, you can change it to 1 for the top or for 4 of more for the bottom

text-align:center you can move your text by changing center to left or right.

My Label Just enter your label here.

That’s it. now go back to Compose mode to continue your post,

Or if you need More Optimization We can add transparency effects to the label. by adding the next line to the code

filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;

so the code will be

My Label

we’ll get the next result.

We set the transparency to 75% you can change it too.

i with this tutorial can help you. and if you need any help, leave a comment here.

By Max

I'm Max, The founder and the admin of AllBlogTools.com I'm a very big van of blogging ,design and coding, I think that i'll die next to my computer.

No related posts found

• 4 responses so far!
•      Rajesh Kumar Chekuri ( 12:36 PM on 6/23/09 )

  nice trick …..
  but it seems not fair….

  funny scraps
  A blog for all about humor and funny scraps….

•      kurungkurawal ( 11:27 AM on 7/12/09 )

  nice info…
  copyright…

•      punet ( 8:01 PM on 7/27/09 )

  mate could you please increase textarea height

•      DD ( 11:11 PM on 8/6/09 )

  Nice tips!