Using CSS To Put Text Over An Image

I'm looking to put two different pieces of text over a background image. I attached the background image (the height/width measurements are exact).

I want it to be something like <div id="title">Top 2009 Products</div> for the top portion of the background, and then below the header, be something like <div id="review">the top products are... blah blah.. blah</div>

Again, I was wondering if this could be done with css... and if so what would be the code? Thanks!

 

Hi there!

This following code should work, with a little tweaking.

.textimage {
  background-image: url('THE IMAGE');
  height: 316px;
  width: 187px;
}
#title {
  padding: 4px 0 0 10px;
}
#review {
  padding: 10px 0 0 10px;
}

Code (markup):

<div class="textimage">
<p id="title">The Title</p>
<p id="review">The Review</p>
</div>

Code (markup):

If you get stuck for what to do, I also wrote an article on this at: http://www.html-tips.net/css-text-over-an-image/

 

Design_Guy, what's the different between "class" and "ID"??

 

Hi 3mints,

A class can be used many times, while an id can only be defined once in a HTML page.
Also, in the CSS you use a period at the start of a class and a hash sign at the start of an id.

 

Thank you