say it isn in a paragraph:

xhmtl

Code: Select all

 
<p class="textOverImage">This text will go over the image</p>

css

Code: Select all

 
.textOverImage {
   background: url(pathtoyourimage) top left no-repeat;
   width: imagewidth;
   height: imageheight;
}

OK...we assign the class textOverImage to the paragraph and then style the class in our css. Obv you can replace this class anme with whatever you like.

ok:

Code: Select all

 
background: url(pathtoyourimage) top left no-repeat;

Replace pathtoyourimage - with the path to your image!
if it is a reepeating image then you can use repeat (to repeat both directions), repeat-x (to repeat horizontally only) or repeat-y (to repeat vertically only).

At the moment it is set to no-repeat, whcih means it will not repeat.

Code: Select all

 
width: imagewidth;
height: imageheight;

If your image needs ot display as a certain size then you can use width and height to specify this. If you do not specify this then you can delete these two attributes and your image wiull be as big as the paragraph text.

To add padding around the text you can use

Code: Select all

 
padding: 10px;

Where 10px can be your value and c an be in %$ or ems or px.

If you want different padding top left bottom and right you can use the followjing shorthand:

padding: topandbottom leftandright; (eg padding: 10px 5px; would add 10px to top and bottom and 5pxx to the sides)

padding top right bottom left; (eg padding: 2px 3px 4px 5px; would add 2px to top, 3px to right, 4px to bottom and 5px to left)

Hope that helps