Recipe 3.8. Overlaying HTML Text on an Image

Problem

You want to position HTML text over an image.

Solution

Set the image within the background, and then position and style the HTML text accordingly.

First, wrap the text around a div element with an id attribute (see Figure 3-14):

<div >  <div >   <h1>White House Confidential <br /><span> Classified Lawn Care Secrets</span></h1>  </div><!-- end #banner -->  <p>...</p> </div><!-- end #frame -->

Figure 3-14. The photo coming through the headings instead of the body element

Insert the image through the background-image property making sure to set the width and height:

#banner {  width: 550px;  height: 561px;  overflow: hidden;  background-image: url(whitehouse.jpg);  background-position: 0;  background-repeat: no-repeat; }

Then adjust the type to the desired style (see Figure 3-15):

h1 {  margin: 0;  padding: 0;  font-family: Verdana, Arial, sans-serif;  margin-top: 325px;  margin-left: 25px;    /* room around text */   padding-left: 25px;  padding-bottom: 25px;  /* bring in the translucent background image */   background-image: url(white-banner.png);  background-position: bottom;  background-repeat: no-repeat;     } h1 span {  font-size: .8em; }

Figure 3-15. The photo coming through the headings instead of the body element

Discussion

Instead of bringing in an image and having it be inline or be part of the content of a web page when its purpose is strictly decorative, use the background-image property to display the image. This method allows the content of the page to have more integrity, but still maintain the intended visual.