Tags: beginner
Displaying Text over Images with CSS and HTML
05/03/08 15:07 , Categories: Usability and Design, CSS, HTML , Tags: beginner, css, html, images, tutorial, web design 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:
<html>
<head>
<title>Yokoso</title>
</head>
<body>
<div id='header'>
<img src='rope.jpg' alt='rope' width=800 height=250 />
<div id='text'>
<h1>Yokoso</h1>
</div>
</div>
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:
body {
margin: 0;
padding: 0;
}
#header {
background: url(rope.jpg) no-repeat;
width: 800px;
height: 250px;
margin-left:auto;
margin-right:auto;
}
#text {
text-align: center;
margin-top: 15px;
margin-right: 100px;
}
And then we have to make a few small changes to the HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS.css" />
<title>Yokoso</title>
</head>
<body>
<div id='header'>
<div id='text'
><h1>Yokoso</h1>
</div>
</div>
</body>
</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.
XML Feeds
