Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

How to Overlay Text on an Image

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.



RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268