Why my content isn't getting the background?

jappe66

Honorable
Apr 13, 2012
6
0
10,510
0
I'm making a simple website and I got a background image for the content part of the site but it won't print out to my screen when I view the site.
I have 1 big div-element that holds 2 smaller div-elements inside itself (2 columns). The divs that are inside the bigger one will just use the default background-color (dark blue) and not show the white image.

My CSS:
Code:
body{
margin: 0;
padding: 0;
background-color: #0e5181;
}

#wrapper {
width: 1000px;
margin: 0 auto;
}

#logo {
background-image: url('../kuvat/logo.gif');
height: 130px;
width: 1000px;
}

#content {
background-image: url('../kuvat/keski.gif');
background-color: #fff;
margin: 0 auto;
}

#valikko {
width: 150px;
float: left;
}

#sisalto {
width: 850px;
float: right;
}

#footer {
background-image: url('../kuvat/footer.gif');
width: 1000px;
height: 43px;
clear: both;
}

#footer p {
text-align: center;
}
and my index.html:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">
<head>
<title>Cool Card</title>
<link rel="stylesheet" type="text/css" href="css/tyyli.css" />
</head>

<body>
<div id="wrapper">
<div id="logo">
</div>
<div id="content">
	<div id="valikko">
		<a href="#">LINK</a>
	</div>
	
	<div id="sisalto">
		*MAIN CONTENT HERE*
	</div>
</div>

<div id="footer">
<p>Copyright &copy; 1999-2012 Cool Card</p>
</div>
</div>
</body>
</html>
 

ASK THE COMMUNITY