Need help with background-image not showing

For whatever reason my background image will not show and i cant figure it out.Can any one give me some help?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>#</title>
<link rel="stylesheet" type="text/css" href="default.css"/>
</head>

<body>

    <div class="wrapOverall">

        <div class="header">

            <div class="nav">
            	<ul>
                	
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">About</a></li>

                </ul>
            </div><!--nav-->

        </div><!--header-->

        <div class="content">

        	<div class="wrapContentImage"></div><!--wrapContentImage-->
        	<div class="wrapLogos"></div><!--wrapLogos-->

        </div><!--content-->

        <div class="wrapBucket">

        	<div class="bucket1">

            	<h2>#</h2>

            </div><!--bucket1-->

            <div class="bucket2">

            	<h2>#</h2>

            </div><!--bucket2-->

        	<div class="bucket3">

            	<h2>#</h2>

            </div><!--bucket3-->       	

        </div><!--wrapBucket-->	

    </div><!--wrapOverall-->
</body>

</html>
@charset "utf-8";
/* CSS Document */

/*#############*/
/*General Rules*/
/*#############*/

.body{
	background-image:url(Images/bg_body.jpg);
	
}

.h1,h2,h3,h4,h5,h6 {
	
}

.p{
	
}

.a{
	
}

.a:hover{
	
}

/*###################*/
/*General Class Rules*/
/*###################*/

.wrapOverall{
	
}

.wrapBucket{
	
}

.wrapContentImage{
	
}

.wrapLogos{
	
}

.header{
	
}

.nav{
	
}

.content{
	
}

/*#################*/
/*General Nav Rules*/
/*#################*/

.nav ul{
	
}

.nav ul li{
	
}

.nav ul a{
	
}

.nav ul a:hover{
	
}

/*#############*/
/*Bucket Rules*/
/*############*/


Hi, nathang, welcome to the forums.

There seems to be an unnecessary dot in front of .body in the CSS. Delete the dot and the image should appear.


.body{
	background-image:url(Images/bg_body.jpg);
	
}

Cheers

Hi nathang. Welcome to the forums. :slight_smile:

background-image:url([COLOR="#FF0000"]Images/bg_body.jpg[/COLOR])

the thing you have to be really careful about is the file paths (in red). Unless you have a folder called /Images/ inside the same folder as the CSS file, that path won’t work. If the /Images/ folder is in your root folder, it’s safer to do this:

background-image:url([COLOR="#FF0000"]/[/COLOR]Images/bg_body.jpg)

EDIT: hehe, well spotted, ronpat. :slight_smile:

<sigh> It was the dot …

Thanks for the help.

You’re very welcome, nathang.

I think you dont use .body css. you should change <body> to <body class = “body”> , or change add <div class=“body”> after <body>.