Making image a background

Here is my problem:
I am having problems in a certain part of my layout (indexx_23.png,20,21,22,24) I want to make these images a background so I can type text overtop of it and so it can expand vertically with my images still aligned correctly. Could anybody lead me in the right direction :? Here is the site and css code if need it: http://www.tacticaltournaments.com.indexx.html

/* CSS Document */

* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
background-color:#333333;

}

#wrapper {
width: 805px;
margin: 0 auto;
margin-top: 10px;
background: #666;
}
body {
font: 1px verdana, arial, sans-serif;
color: #333;
background-image:url(/images/diaglinBg.jpg);
background-repeat:repeat;
}
.head {
display: block;
margin: 0 auto;
margin-right: 0px;
padding: 0;
float: left;
}
.head2 {
display: block;
margin: 0 auto;
margin-right: 0px;
padding: 0;
float: left;
clear: right;
}
#nav li {
list-style: none;
line-height:2em;
float: left;
text-align: center;
}
#nav li a {
display: block;
background: #FFF;
color: #009900;
border: none;
border-width: 0px;
}

Instead of placing the images in the content, assign them as background images to the divs that currently hold them using CSS: The background (http://www.w3.org/TR/2004/CR-CSS21-20040225/colors.html#q2).
You'll have to alter your classes though to be able to assign different background images to different divs; you'll probably want to rethink your layout as well, because currently it serves little more purpose then arranging those images.

Yes I know I will have to change diffrent classes and stuff... But the thing is it isn't working for me when I change one thing. Here is what im doing: #news {
top:0;
left:0;
float:left;
background-image:url(images/indexx_23.png);
background-repeat: repeat;
width:585px;
height:252px;
margin: 0 auto;
margin-right: 0px;
padding: 0;
}