Displaying Text over Images with CSS and HTML

Today I want to share a simple method for displaying text on top of images using CSS and HTML. This technique is useful for a number of reasons. It makes your text visible to people using text-only browsers. It allows you to use heading tags on the text, which will improve your search engine optimization. And it will let you use a single image under text that is customized for many different pages.

So let’s suppose you have a nice picture of a Shimenawa rope from a Shinto shrine in Japan and you want to put the word ‘Yokoso,’which is Japanese for ‘welcome,’ on top of the image.

The HTML code looks like this:

Which puts the text underneath the image like this:

Essentially what we want to do is take the image out of the html code and put it into a CSS file as a background image for the header div, and then place the text div where we want it.

The CSS will look something like this:

And then we have to make a few small changes to the HTML:

Which will put the text clearly over top of the image right in the center of the page:

So there you have it, a simple method for putting text on top of an image using CSS and HTML. Next time I’ll look at a way to use GIMP to further tweak images for the web.

I’m still working on the design and usability review of my sample web directory. I want to give a warm thank you to everyone who has sent me suggestions and advice. But it’s not too late to help me out. If you’re so inclined, take a look at my sample web directory and let me know what you think. I’ll be sure to give you credit when I roll out the new and improved design.

Except where otherwise noted, this content is licensed under a Creative Commons License.