HTML CSS: Background image is not showing up

Question

There are similar questions in StackOverflow on this topic but none of them bring answer to my question:

#header{
    border-bottom: 3px solid #87B825;
    background: #84E637 url("backg400.gif") repeat-x top left; **<!-- This background is not showing up -->**
}

All of the files being in the same directory, there should not be any file path issue.

Here below the html and associated CSS sources adopted from Dan Cederholm in Chapter 9 of his book "Bulletproof Web Design", 2nd Edition.

Thank you in advance for your help.

1) HTML source

<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>My Site</title>
<link href="mysite.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="header">
<h1> My Site</h1>
this is header
</div> <!--end #header -->

<p id="message">
<strong>This is my site</strong>
</p>


<div id="wrap">

<div id="content">
<div class="gutter">
... content goes here
</div> <!--end .gutter -->
</div>  <!--end #content  -->

<div id="sidebar">
<div class="gutter">
<p>... sidebar goes here </p>

</div>  <!--end .gutter -->
</div>  <!--end #sidebar -->

<div id="footer">
<p> Copyright &copy; 2015 My Site. All rights reserved</p>
</div>

</div>  <!--end #wrap -->

</body>
</html>

CSS source (mysite.css):

@charset "iso-8859-1";
    body {
    margin: 0;
    padding: 0;
    font-familly: Verdana, sans-serif;
    font-size: small;
    background: #fff;
}
<!-- Layout structure -->
#header{
    border-bottom: 3px solid #87B825;
    background: #84E637 url("backg400.gif") repeat-x top left; <!-- This one is not showing up -->
}
#header h1{ 
    margin: 0;
    padding: 25px;
    font-family: Georgia, serif;
    font-size: 150%;
    color: #374C0E;
    background: url("backg400.gif") no-repeat top left; <!-- This one is not showing up -->
 }
#wrap{
    background: url("backg400.gif")  repeat-y 80% 0; <!-- This one is showing up -->
 }
#content{
    float: left;
    width: 80%;
    font-size: 95%;
    line-height: 1.5em
    color: #333;
}
#sidebar{
    float: right;
    width: 20%;
}
#footer{
   clear: both;
   background: #828377;
}

Answer 1

You are using HTML comments (  ) on your stylesheet. Remove all these HTML comments from your stylesheet and use the following comment syntax instead:

/** comment content */

Note: There is a typo on the body rule: font-family instead of font-familly .

Answer 2

另外，尝试使用W3C验证服务检查CSS语法： http : //www.css-validator.org/#validate_by_input

HTML CSS: Background image is not showing up

Question

2 answers

solution1
2 ACCPTED 2015-10-03 11:24:46

solution2
0 2015-10-03 11:41:23

HTML CSS: Background image is not showing up

Question

2 answers

solution1 2 ACCPTED 2015-10-03 11:24:46

solution2 0 2015-10-03 11:41:23

solution1
2 ACCPTED 2015-10-03 11:24:46

solution2
0 2015-10-03 11:41:23