Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

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

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.

More Easy Cascading Style Sheets:
• Easy Floating Menu Code
• How to Center a DIV
• Easy Scrollable Area Code
• Easy Text Drop Shadows
• CSS Transition Code For a Pulsating Button
• How to Use a Pull Quote
• Easy Rollover Menu Code
• Using Google Fonts
• Pro CSS Techniques
• CSS to Use an Image as a Mask

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro


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