Can't get images to display in CSS

[rush it]

I'm working on a psuedo project. It's just for experience. However, I will soon be working on a project that I'll need this skill for.

I sliced a .psd and am writing the html and css to build two pages: home and about us. I'm not very experienced at writing css from the ground up. I've done more with adjusting existing CSS on projects. I've been scouring forums and have made many adjustments, but none has worked.

I can get the top two images to appear in the top header, along with social buttons (twitter, etc.) but can't get the images or background for the bottom header to appear, or the image below that. I've tried replicating what worked with the other images, but to no avail. I don't know if it's a matter of when I should use ID's and when I should use classes in html or not. I've tried switching those around in some areas, then changing the CSS to reflect that. I'm at wit's end.

Can anyone see what's wrong with my code? I'm not sure if it will work without the images. Unfortunately, they belong to a client and I don't think I can attach them. I've validated the CSS and HTML on W3C and they're good. The CSS at the bottom is not finished and I'm sure I'll add more to the HTML. I decided I'd spent too much time trying to figure it out myself and wanted to get something posted here. Remember, I'm not very experienced with from-the-ground-up CSS, so please don't assume I know what you're talking about. Cheers.

My CSS:

body
{
font-family:Arial;
font-weight:bold;
font-size:12px;
color:#3f4a4e;
margin:0; 
padding:0;

}

/*==============================
PAGE WRAPPER
===============================*/

#page
{
width: 1150px;
min-height:600px;
margin-left:auto;
margin-right:auto;
}

/*==============================
HEADER WRAPPER
===============================*/

#top-header
{
width:980px;
background: url(images/topgraybar.png);
height: 57px;
background: #dcdcdc;
background-image: url(images/logo.png);
background-repeat: no-repeat;
margin: 0 auto 0 auto;

}

ul 
{
float:left;
margin-left: 350px;
width:100%;
list-style-type:none;
height:20px;
padding-top: 20px;
position: absolute;
 
}

a 
{
float:left;
text-decoration:none;
color:#808080;
padding: .6em;

}

a:hover 
{
background-color:#cc3300;

}

li 
{
display:inline;
padding: 2.2em;
margin: 0 auto 0 auto;

}


/*social buttons*/

.twitter
{
background-image: url(images/twitter.png);
background-repeat: no-repeat;
margin:-1px 80px auto 745px;
padding-top: 80px;
padding-bottom: 30px;
position: relative;
float:right;
width:8.5%;
}

.facebook
{

background-image: url(images/facebook.png);
background-repeat: no-repeat;
margin:-110px 40px auto auto;
padding-top: 50px;
padding-bottom: 30px;
position: relative;
float:right;
clear:right;
width:9%;
}

.rss
{
background-image: url(images/rss.png);
background-repeat: no-repeat;
margin:-111px 40.5px auto auto;
padding-top: 100px;
padding-bottom: 30px;
position: relative;
float:right;
width:5%;
}

/*second header (orange bckgrnd, pic of men, etc.)*/


.btm-background
{
background: url(images/orangebckgrnd.png);
background-repeat: repeat;
float:left;

}

.top-pic
{
background-image: url(images/mainpic.png);
float:left;
margin-left:75px;

}

.btm-block
{
background: url(images/blackblock.png);
float:right;
margin-right:75px;
}

.black-arrow
{
background-image: url(images/blackarrow.png);
float:left;
margin-left:65px;

}

.red-arrow
{
background-image: url(images/redarrow.png);
float:right;
margin-right:65px;
}

/*==============================
BODY WRAPPER
==============================*/

#body-wrapper
{
margin-top:350px;
float:left;
width:800px;

}

.intro
{
margin-top: 250px;
}

.tower
{
clear:left;
float:right;
margin:500px 85px auto auto;
padding-top: 35px;
}

.under-tower
{
clear:left;
float:right;
margin:800px 85px auto auto;
}

.thumbone
{
background-image: url(thumbone.png);
margin: 875px 165px auto auto;
float:right;
clear:right;
}

.thumbtwo
{
background-image: url(thumbtwo.png);
margin: 875px 150px auto auto;
float:right;
clear:right;
}

.thumbthree
{
background-image: url(thumbthree.png);
margin: 875px 1115px auto auto;
float:right;
clear:right;
}
/*==============================
FOOTER
===============================*/

.serration
{
background: url(images/btmgraydot.png);
float:left;
position:absolute;
margin:200px auto 0 auto;
}

.first-footer
{
background: url(images/blackfooter.png);
}

.first-quote
{
background: url(images/blackfooterquote.png);
}

.second-footer
{
background: url(images/grayfooter.png);
}

.second-quote
{
background: url(images/grayfooterquote.png);
}

My HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Company Name</title>
	<link rel="stylesheet" type="text/css" href = "style.css"  media="screen"  />
</head>

<body>
<div id="page">
	<div id="header" >
		<div id="top-header">
			<ul class="nav">
				<li><a href="whatwedo.html">What We Do</a></li>
				<li><a href="approach">Our Approach</a></li>
				<li><a href="experience">Our Experience</a></li>
				<li><a href="news">News</a></li>
				<li><a href="about">About Us</a></li>
				<li><a href="careers">Careers</a></li>
				<li><a href="contact">Contact Us</a></li>
			</ul>
	
			<div id="social">
				<div class="twitter"></div>
				<div class="facebook"></div>
				<div class="rss"></div>
			</div>
		</div>

		<div id="btm-header">
			<div class="btm-background"></div>	
			<div class="top-pic"></div>
			<div class="btm-block"></div>
			<div class="black-arrow"></div>
			<div class="red-arrow"></div>
		</div>
	</div>
	<div id="body-wrapper">
		<div class="intro">
			<p>Since 1969, Acme Company has been delivering quality products throughout the greater...</p><br /><br />
			<div class="tower"></div>
			<div class="under-tower"></div>
			<div class="thumbone.png"></div>
			<div class="thumbtwo.png"></div>
			<div class="thumbthree.png"></div>
		</div>		
	</div>	
</div>

<div id="footer">
		<div class="serration"></div>
		<div class="first-footer">
			<div class ="first-quote"></div>
		</div>
		<div class="second-footer">
			<div class="second-quote"></div>
		</div>
</div>


</body>
</html>

[drhowarddrfine]

You have your class name in the divs as the name of the source image, such as "thumbthree.png ". It should just be "thumbthree " in that instance.

Also, the divs have no content and you haven't set a width/height, so they will collapse to nothing.

[rush it]

I'm now getting my images to display. I started giving my images more parameters: heights, margins, padding, clears, floats. I just kept experimenting to see what each image needed. The first image popped up so quickly that I thought something was wrong. I'm such a CSS newb that I didn't realize that the position of the image determines which or how many settings it needs. Lesson learned. For today.

[drhowarddrfine]

Images don't need anything to display but, in this case, you are using background images so it's the containing element itself that needs additional stuff.