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

What does the Network tab in your browser's F12 tools say?

Dai
– Dai

2015-10-03 11:14:08 +00:00
Commented Oct 3, 2015 at 11:14 — Dai
– Dai, Commented Oct 3, 2015 at 11:14

Sebastian Brosch · Accepted Answer · 2018-02-07 07:20:04Z

2

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.

edited Feb 7, 2018 at 7:20

answered Oct 3, 2015 at 11:24

Sebastian Brosch

43.8k15 gold badges78 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ganesh Yadav Over a year ago

Yes. I agreed with @sebastianbroch.  in css is giving error. instead use /** css comment **/ . I tried a fiddle demo and It's working just fine. jsfiddle.net/locateganesh/7n3n151v

Sachin Dhir · Accepted Answer · 2015-10-03 11:41:23Z

0

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

answered Oct 3, 2015 at 11:41

Sachin Dhir

2112 silver badges8 bronze badges

Collectives™ on Stack Overflow

HTML CSS: Background image is not showing up

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related