Can't link background image to div

programming web dev
1

I’ve got a really strange problem. I’ve been trying to add a background image to a webpage, and my CSS mostly works. I just have one (and only one) id which won’t accept a background image. I can make any other change to it, just not that.

Presumed trouble spots are in bold.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Jazz for Peace :: Page Title</title>
<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="mobile.css" media="handheld">
</head>
    <body>
        <div id="header">
            <div id="socialmedia">
                <img src="twitter.png"/>
                <img src="facebook.png" />
                <img src="linkedin.png"/>
            </div>
            <div id="logobar"><img src="dove-grey.gif"></div>
            <div id="menu">
                <ul>
                    <li><a href="http://www.rickdellaratta.com">Rick DellaRatta</a></li>
                    <li><a href="jfparticles.html">Articles</a></li>
                    <li><a href="http://www.jazzforpeace.org/sponsors.html">Sponsors</a></li>
                    <li><a href="http://www.jazzforpeace.org/volunteer.html">Volunteer</a></li>
                    <li><a href="http://www.jazzforpeace.org/testimonials.html">Testimonials</a></li>
                    <li><a href="http://www.jazzforpeace.org/onlinestore.html">Online Store</a></li>
                    <li><a href="http://www.jazzforpeace.org/press.html">Press</a></li>
                    <li><a href="http://www.jazzforpeace.org/currentevents.php">Events</a></li>
                    <li><a href="http://www.jazzforpeace.org/contact.html" class="last">Contact Us</a></li>
                </ul>
            </div>
            <div id="breadcrumb">
                <ul>
                    <li>Top</li>
                    <li>Level 2</li>
                    <li>Level 3</li>
                </ul>
            </div>
        </div>
        **<div id="content">...</div>**
        <div id="footer">&copy; 2011 Jazz for Peace</div>
    </body>
</html>

@CHARSET "ISO-8859-1";
* { margin:0 0 0 0; }
body { width:100%; height:100%; }
    #header { height:100px; width:100%; }
        #socialmedia { float:right; position:relative; right:10px; }
        #logobar { }
        #logobar img { width:100px; position:relative; z-index:10; }
        #menu { position:absolute; top:50px; width:100%; background-color:black; color:white; height:60px; }
            #menu a { color:#d3d3d3; position:relative; top:15px; text-decoration:none; }
            #menu a:after { content:" | "; }
            #menu a.last:after { content:""; }
            #menu ul { padding-left:100px; }
            #menu ul li { display:inline; font-size:large; }
        #breadcrumb { position:relative; top:25px; background-color:#add8e6; width:100%; margin-top:0; }
            #breadcrumb ul { padding-left:10px; }
            #breadcrumb ul li { display:inline; }
            #breadcrumb ul li:after { content:" » "; }
**    #content { position:relative; top:75px; background:black url(gradient-bg.png) center top;}**
        #left,#center,#right { float:left; }
        #center { width:100%; }
        #left, #right { width:25%; }
    #footer { position:fixed; bottom:0; background-color:#add8e6; width:100%; }