CODEWITHSUNDEEP
htmlcss
MGZ
MGZ

Reputation: 141

HTML CSS: Background image is not showing up

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;
}

Upvotes: 1

Views: 86

Answers (2)

Sebastian Brosch
Sebastian Brosch

Reputation: 43594

You are using HTML comments (<!-- comment content -->) 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.

Upvotes: 2

Sachin Dhir
Sachin Dhir

Reputation: 211

Additionally try checking your CSS syntax using W3C validation service: http://www.css-validator.org/#validate_by_input

Upvotes: 0

Related Questions