CODEWITHSUNDEEP
htmlcssimageheader
Jeweetzelf
Jeweetzelf

Reputation: 65

Why won't my background image show?

What's the reason my header image won't show? (any advice for the future will be appreciated!)

Below you'll see my current syntax. I wanted to add a jsfiddle link, but since everything refers to images I have on my computer, I thought it would be easier to upload my entire folder instead. HERE is the link to that

html

<head>
    <title>index</title>
    <link href="style.css"  rel="stylesheet"  type="text/css" />
</head>
<body>
    <div id="container">    
        <div id="header"></div><!-- end header -->

        <div id="menu">
            <ul>
                <li><a href="index.php"><img border="0" id="homebutton" alt="" src="img/home button.png" width="145px" height="auto"></a></li>
                <li><a href="about.php"><img border="0" id="aboutbutton" alt="" src="img/about button.png" width="145px" height="auto"></a></li>
                <li><a href="gallery.php"><img border="0" id="gallerybutton" alt="" src="img/gallery button.png" width="145px" height="auto"></a></li>
                <li><a href="contact.php"><img border="0" id="contactbutton" alt="" src="img/contact button.png" width="145px" height="auto"></a></li>
            </ul>
        </div><!-- end menu -->

        <div id="content"></div><!-- einde content -->      
    </div><!-- end container -->    
</body>

css

#container {
    margin: 0px auto;
    padding: 10px;
    width: 1300px;
}

#header {
    background-image: url("img/header.png");
    background-repeat: no-repeat;
    width: 1300px;
    height: auto;
    max-height: 275px;
}

#menu ul {
    margin: 0;
    padding: 0;
    list-style:none;
}

#menu ul li  {
    float: left;
}

Upvotes: 1

Views: 4840

Answers (8)

kevin
kevin

Reputation: 104

On your #header, change 

 height:auto;

to something like

height: 200px; //or whatever the height of your img is

The problem here is that your div defaults to height: 0px; and therefore there's no room for your image to show.

Alternatively, you need to at least set a min-height on the div so the image can show.

Upvotes: 0

Vecihi Baltacı
Vecihi Baltacı

Reputation: 352

your problem is css, #header styles. Please try width:100px instead of width:auto. (100px is example). This works for me.

Upvotes: 0

gabor.harsanyi
gabor.harsanyi

Reputation: 599

You used the image as a background but background of what? (I mean there is no size of the header div so the background cannot be displayed)

You have to increase the size (width/height) of the <div id="header"></div>

Upvotes: 2

Erik Terwan
Erik Terwan

Reputation: 2780

That is because in the header, you are only setting max-height and the height to auto, you should include a min-height for it to show.

Upvotes: 3

Oliverb
Oliverb

Reputation: 142

try changing max-height: 275px; to min-height:275px;

the div has no contents so defaults to being 0px high

Upvotes: 3

Thomas Rbt
Thomas Rbt

Reputation: 1538

You actual height is 0px, so you can't see it. You need to write a size too, like height: 10px; or min-height: 10px.

Upvotes: 2

vldfr
vldfr

Reputation: 183

If your HTML file is in root, the syntax would be ok at the image, but else it could be instead of:
background-image: url("img/header.png");
background-image: url("/img/header.png"); (note the "/" at the url)

Or the name of the image. Or the extension.

Upvotes: 0

Zander
Zander

Reputation: 1086

First of all, set an height to your header. As you set the max-height you are saying the height cannot pass that number, but your header is empty, so the height will be 0.

Second, be careful with paths. May in your HTML the path was img/image.png, but your css file is in a folder called styles. If that's your case, remember to add the relative path to the image from the styles folder, background-image: url("../relative/path/to/image.png");

Upvotes: 0

Related Questions