HTML div background image not working

debugcn Published at Dev

D3XT3R

The HTML div for the navigation bar design in CSS will not work.

CSS

/* CSS Document */

*{
    margin: 0px;
    padding: 0px; 
}

.clear {
    clear:both;
    height:0px; 
}

body {  
    background:url(../images/bg.jpg) no-repeat scroll center top #13120d;   

    margin: 0;  
    padding: 0;     
    font-family: Tahoma;
    font-size: 13px; 
}   

#header_menu_bg {
    background: url('../images/navigation.png') no-repeat center top;
    height: 198px;  
    width: 737px; 
}

This is just a short example.

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="robots" content="index, follow"/>
        <meta name="keywords" content="bla"/>
        <meta name="description" content="bla"/>
        <title>WEBSITE</title>

        <link rel="stylesheet" type="text/css" href="styles/main.css"/>
        <link rel="shortcut icon" href="favicon.png"/>
    </head>
    <body>
        <div id="header_menu_bg">

Any help will be much appreciated!

Pieter VDE

Make sure the URL to your image is correct.
Place the URL in between ' or " tags (url("../images/navigation.png"))
Add a width to your div, f.e. width: 200px;

EDIT: When looking at your full HTML, you also need to close your <body> and <html> tags.

Your full code will look like this:

HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="robots" content="index, follow"/>
    <meta name="keywords" content="bla"/>
    <meta name="description" content="bla"/>
    <title>WEBSITE</title>

    <link rel="stylesheet" type="text/css" href="styles/main.css"/>
    <link rel="shortcut icon" href="favicon.png"/>
</head>
<body>
    <div id="header_menu_bg"></div>
</body>
</html>

CSS:

*{
    margin: 0px;
    padding: 0px; 
}

.clear {
    clear:both;
    height:0px; 
}

body {  
    background-color: #13120d;  
    margin: 0;  
    padding: 0;     
    font-family: Tahoma;
    font-size: 13px; 
}   

#header_menu_bg {
    background: url('http://placehold.it/737x198') no-repeat center top;
    height: 198px;  
    width: 737px; 
}

DEMO: JSBin (JSFiddle doesn't seem to work at the moment)

Collected from the Internet

Please contact [email protected] to delete if infringement.