HTML div background image not working

Question

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!

Where did your write the CSS? In the header or a seperate file? Don't forget to add a link to the css file — Johannes, Aug 06 '14 at 14:02
the navigation.png just doesn't show up in the HTML document when the css and div are all good.. — D3XT3R, Aug 06 '14 at 14:06
Possible duplicate - http://stackoverflow.com/questions/20064596/adding-background-image-to-div-using-css — rageit, Aug 06 '14 at 14:20

carterh062 · Answer 1 · 2014-08-06T14:24:27.643

1

You need to assign it a width attribute.

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

EDIT

Check in the console log, to see if there are issues with the browser finding your image. Perhaps you have the wrong path.

EDIT 2

Close your <body> and <div> tags.

edited Aug 06 '14 at 14:24

answered Aug 06 '14 at 14:01

carterh062

190
10

the div won't show up in the HTML, it doesn't display the navigation as intended – D3XT3R Aug 06 '14 at 14:07
Is it perhaps somehow under another
in the document?
– carterh062 Aug 06 '14 at 14:08
as said in other answers, you need quotes around the url for your image in the css. – carterh062 Aug 06 '14 at 14:13
ive added quotes with no luck – D3XT3R Aug 06 '14 at 14:15
apparently there are no issues in the log, css linked to the right path as well. – D3XT3R Aug 06 '14 at 14:20

Pieter VDE · Accepted Answer · 2014-08-06T14:34:18.123

1

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)

edited Aug 06 '14 at 14:34

answered Aug 06 '14 at 14:09

Pieter VDE

2,195
4
25
44

Unfortunately not. Try and explain the problem a bit more, add some code, anything that would help us help you. – Pieter VDE Aug 06 '14 at 14:26
Are the links to the images correct? Are the image files not corrupt/damaged? Is the path to your CSS correct? ... – Pieter VDE Aug 06 '14 at 14:37
hell ya they are correct, not damaged, ive just exported them from photoshop – D3XT3R Aug 06 '14 at 14:38
Does it work if you use the images on the URL's I provided? Are you using the right file extension(s)? – Pieter VDE Aug 06 '14 at 14:39
But does it work when **replacing your paths with the ones I provided**? – Pieter VDE Aug 06 '14 at 14:55

score 0 · Answer 3 · answered Aug 06 '14 at 14:08

0

Assuming you have referenced the css file correctly and no error in your html coding structure I suggest clearing your browser cache.

answered Aug 06 '14 at 14:08

Bashabi

696
1
12
40

score 0 · Answer 4 · answered Aug 06 '14 at 14:11

0

background: url(../images/navigation.png) no-repeat center top;

you need "" or '' like this:

background: url('../images/navigation.png') no-repeat center top;

probably this helps you

answered Aug 06 '14 at 14:11

gsiradze

4,583
15
64
111

score 0 · Answer 5 · answered Aug 06 '14 at 14:32

The following css works and puts an image in the DIV. Fiddle is not working at the moment and I can't put a link for it now.

#header_menu_bg 
{
    background-image: url('fnordware.com/superpng/pngtest16rgba.png'); 
    height: 32px; 
    width: 32px; 
}

You either have a wrong url or something else is wrong if this css doesn't work for you.

score 0 · Answer 6 · answered Aug 06 '14 at 15:09

Try this :

Download the sample image from Here and save it as bg.jpg.

Create a new folder and put the 2 below files & a image in same folder.

HTML (index.html)

<!DOCTYPE html>   
<head>
   <title>WEBSITE</title>
   <link rel="stylesheet" type="text/css" href="main.css"/>        
</head>
<body>
    <div id="header_menu_bg">
</body>
</html>

CSS (main.css)

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

#header_menu_bg
{
background: url('bg.jpg') no-repeat center top;
width: 280px;  
height: 500px; 
}

RESULT:

enter image description here

HTML div background image not working

6 Answers6