I'm using the following css to define my background:
body
{
background-image: url('background.png');
font-size: 12pt;
font-family: Veranda, Arial, Helvetica, sans-serif;
}
The image background.png is stored in the root directory, but whenever I refresh the webpage, the background remains white. MY instructor currently has a copy of my files and is attempting to figure it out himself, though the problem wasn't obvious to him at a cursory glance. My full html and css are as follows:
HTML:
<!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">
<html>
<head>
<meta http-equiv="content-type" content = "text/html charset = utf-8" />
<link rel = stylesheet href = "style.css" type = "text/css" media = screen>
<title>
Title
</title>
</head>
<body>
<div id = "wrapper">
<div id = "leftsidebar">
<h3> Navigation </h3>
</div>
<div id = "content">
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<p align = "justify"> Paragraph 1.</p>
<p align = "justify"> Paragraph 2 </p>
<p align = "justify"> Paragraph 3 </p>
</div>
</div>
</body>
</html>
CSS:
<style type = "text/css">
<!--
body
{
background-image: url('background.png');
font-size: 12pt;
font-family: Veranda, Arial, Helvetica, sans-serif;
}
div#wrapper
{
width: 80%;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
}
div#header
{
padding: 15px;
margin: 0px;
text-align: centre;
}
div#leftsidebar
{
width: 25%;
padding: 10px;
margin-top: 1px;
float: left;
}
div#content
{
margin-left: 30%;
margin-top: 1px;
padding: 10px;
}
div#footer
{
padding: 15px;
margin: 0px;
border-top: thin solid #000000;
}
-->
</style>