CODEWITHSUNDEEP
cssbackground-image
Saladin Akara
Saladin Akara

Reputation: 2548

Why won't background image display?

I am trying to display a background image for a website header, however, it won't display. Here is the code:

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Matt Hayward's Blog</title>
    <link rel="stylesheet" type="text/css" href="styles/main.css">
</head>
<body>
    <div id="wrapper">
        <div id="header">

        </div> <!-- header -->
        <div id="navbar">
            <ul>

            </ul>
        </div> <!-- navbar -->
        <div id="maincontent">

        </div> <!-- maincontent -->
        <div id="rightmenu">

        </div> <!-- rightmenu -->
    </div> <!-- wrapper -->
    <div id="footer">

    </div> <!-- footer -->
</body>
</html>

And the CSS for the header div:

#header
{
    background: #fff url(header.png) no-repeat;
    width: 960px;
    height: 121px;
}

This is something I have used a hundred times before, and never had problems displaying the background image, so I'm totally perplexed to as to why it isn't working. If anyone can help, that would be great.

I have tried the url() property both with and without single quotes, but neither way works.

(I know similar questions have been asked before, and I've looked at several of them but the answers don't solve my problem.)

Upvotes: 0

Views: 6970

Answers (1)

Brent
Brent

Reputation: 2971

Your code is good. Make sure header.png exists and resides in the styles folder.

Upvotes: 2

Related Questions