How to Overlay Text on an Image
By Stephen Bucaro
At some point you might find the need to put text over an image, for example you might want
to put the name of a person in a picture on top of the picture. The easiest way to do that
is to use a graphics editor, but with a graphics editor, if you don't like the exact location
where you placed the text, you have to start all over. If you could do it with style code,
you could experiment and move the text around just by retyping a few digits.
This is my text.
By Searching the Internet, you'll find dozens of ways to overlay text on an image, each with
its own advantages and disadvantages. In this article I present my own method, which of course
has its own advantages and disadvantages. The problem with finding a perfect method is that
the two most popular browsers, Internet Explorer nd Firefox, don't agree on what a box is
or where it's located on a webpage.
Shown below is the code for this example:
<span style="background-image:url('shuttle_on_747.jpg');
display:inline-block; width:400px; height:300px;">
<div style="font-family:verdana; font-size:30px; font-weight:bold;
color:white; margin-left:70px; margin-top:190px;">This is my text.</div>
</span>
This code uses the image as the background for a span element. In the url method, pass the
path and file name to your image. The reason for using a span is allow the image to flow into
position on the page with the other text and html elements. If you don't care about this,
a block element such as a div would be easier to use.
Note the second line of code sets the width and height of the span to the same width and
height of the image. Unfortunately Firefox and the W3C standard think that when you specify
the width and height of an inline element that you're just joking around. Therefore you
have to specify the display property as inline-block.
In the third line of code, create a nested div to contain the text and set the font with
this div's font-properties. In the fourth line, set the text color and use the margin-left
and margin-top properties to position the text within the div, and therefore within the
span and on the image.
The easiest way to overlay text on an image is to use a graphics editor, but with a
graphics editor, if you don't like the exact location where you placed the text, you have
to start all over. By doing it with style code, you can experiment and move the text around
just by retyping a few digits.
More Easy Cascading Style Sheets:
• How to Use a Pull Quote
• How to Style a List
• Spice Up Your Web Forms with Color and Graphics
• CSS Transition Code For a Pulsating Button
• How to Center a DIV
• Make a Fixed-width Variable-height Round Cornered Box
• Code for Horizontal Drop-down Menu Bar
• Easy Visual Effects to Spice Up Your Webpage
• Add Background Color to a Heading
• Write Style Rules to Make Them Understandable
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
