Why place text on an Image ?
If you place text on an image via Hyper Text Markup Language ( HTML ) or Cascading Style Sheets (CSS ) it can serve multiple purposes. It helps search engines to crawl the text and get an idea of what the image is all about leading to a better SEO. It can also provide you the flexibility of changing it easily in future without having to use complicated image processing software like Photoshop etc.
Here are various code samples to place text on an image easily:
Using CSS and HTML to place plain text on an image:
In order to put plain text on your image add the following to your CSS
.imagecontainer {
position:relative;
float:right;
}
.imagecontainer .textcontainer {
position:absolute;
top:2px;
left:10px;
color:#FFFFFF;
font-weight: bold;
}
Now use the following as an example to place any text on the image.
Using CSS and HTML to place text link on an image:
The initial CSS code change should be same as above. First add following code to the CSS.
.imagecontainer {
position:relative;
float:right;
}
.imagecontainer a {
position:absolute;
top:2px;
left:10px;
color:#FFFFFF;
font-weight: bold;
}
Now use the HTML code as an example to place any text link on the image.
Explanation of code used to place text on an image
CSS element for the image
position:relative; specifies that the image is positioned relative to its normal position.
float:right; Floats the image to the right. Change it to any desired direction.
CSS for the text element
position:absolute; The text is positioned relative to its first positioned ancestor element.
top:2px; For absolutely positioned elements as in this case, the top property sets the top edge of the text above/below the top edge of image.
left:10px; For absolutely positioned elements as inthis case, the left property sets the left edge of the text to the left/right of the left edge of the image.
color and font-weight elements are self explanatory.