Page Background Image Not Showing [Archive]

jigsawsoul

05-11-2011, 11:02 AM

I can't seem to add a background image to my index page, I can easliy change the colour of the background but when added an image nothing appears, I've double check the url a number of times and everything there is fine, but the image still doesn't apear.

I working locally

html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>Studio 2</title>
<link rel="stylesheet" href="_css/style.css" type="text/css" media="screen" />
</head>

<body>

<div id="container">

<div id="header">
<div id="logo"><img src="_img/logo.png" width="89" height="93" alt="studio 2" /></div>
</div>

<div id="navgation">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#" class="active">Shop Men's</a></li>
<li><a href="#">Shop Woman's</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>

<div id="breadcrum">
<div id="bleft">
<a href="#" class="bleftlink">Back to shoes page</a>
</div>
<div id="bright">
<a href="#" class="brightlink">shop men's</a> - <a href="#" class="brightlink">footwear</a> - <a href="#" class="brightlink">supra</a>
</div>
</div>

<div id="sidebar">
<h2>men's fashion</h2>
<ul id="sidebarmenu">
<li><a href="#">accessories</a></li>
<li><a href="#">bags</a></li>
<li><a href="#">hoodies & sweatshirts</a></li>
<li><a href="#">jackets & coats</a></li>
<li><a href="#">jeans</a></li>
<li><a href="#">jewellery</a></li>
<li><a href="#">jumpers & cardigans</a></li>
<li><a href="#">polo shirts</a></li>
<li><a href="#">shirts</a></li>
<li><a href="#">shoes</a></li>
<li><a href="#">trainers</a></li>
<li><a href="#">t-shirts</a></li>
<li><a href="#">underwear</a></li>
</ul>
<br />
<h2>shop by brand</h2>
<ul id="sidebarmenu">
<li><a href="#">supra</a></li>
<li><a href="#">plain jane homme</a></li>
<li><a href="#">lrg</a></li>
<li><a href="#">kr3w</a></li>
<li><a href="#">funky bling</a></li>
<li><a href="#">the hundreds</a></li>
<li><a href="#">phormula inc.</a></li>
<li><a href="#">benny gold</a></li>
</ul>

</div>

<div id="content">
<img src="_img/Supra-Spring-11.jpg" alt="supra spring 2011" />
</div>

<div class="clearfooter"></div>

</div>

<div id="footer">
<ul id="footermenu">
<li><a href="#">home</a></li>
<li>|</li>
<li><a href="#">shop men's</a></li>
<li>|</li>
<li><a href="#">shop women's</a></li>
<li>|</li>
<li><a href="#">shopping cart</a></li>
<li>|</li>
<li><a href="#">about us</a></li>
<li>|</li>
<li><a href="#">contact</a></li>
<li>|</li>
<li><a href="#">site map</a></li>
</ul>
</div>

</body>

</html>

CSS
html, body
{
text-align: center;

margin: 0px; padding: 0px;

height: 100%;

background-image: url(_img/bg.jpg); background-repeat: repeat-x;
}

h2
{
font-family: Helvetica; font-size: 12px; font-weight: bold;

text-transform: uppercase;
}

a:link
{
text-decoration: none;

font-family: Helvetica; font-size: 9px; font-weight: bold;

color: #4D4D4D;
}

a:active, a:hover
{
text-decoration: none; color: #ee3532;
}

#container
{
position:relative;

margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: -30px;

width: 940px; min-height:1000px;

text-align: left;

background-color: white;

border-style: solid; border-width: 10px; border-color: #efefef; border-top: none; border-bottom: none;
}

#header
{
width: 940px; height: 130px;

background-color: black;
}

#logo
{
width: 89px; height: 93px;

margin: 0px;

padding-top: 18px; padding-left: 33px;
}

#navgation
{
width: 920px; height: 30px;

margin: 10px; margin-top: 0px; margin-bottom: 0px;

border-bottom: 1px; border-bottom-style: solid; border-bottom-color: black;
}

ul#menu
{
margin: 0px; padding: 0px;

line-height: 30px;

text-align: center;
}

ul#menu li
{
display: inline;

padding-right: 30px;
}

ul#menu li a
{
text-decoration: none;

color: #4D4D4D;

font-family: Helvetica; font-size:12px; font-weight:bold;

text-transform: uppercase;
}

ul#menu li a.active, ul#menu li a:hover
{
color: #ee3532;
}

#breadcrum
{
width: 920px; height: 30px;

margin-left: 10px; margin-right: 10px;

border-bottom: 1px; border-bottom-style: solid; border-bottom-color: gray;
}

#bleft
{
width: 450px; height: 30px;

float: left;

text-align: left;

font-family: Helvetica; font-size:9px; font-weight:bold;

text-transform: uppercase;

line-height: 30px;
}

#bright
{
width: 450px; height: 30px;

float: right;

text-align: right;

font-family: Helvetica; font-size:9px; font-weight:bold; color: #bfbfbf;

text-transform: uppercase;

line-height: 30px;
}

a.bleftlink:link
{
color: #ee3532;
}

a.brightlink:link
{
color: #bfbfbf;
}

#sidebar
{
margin: 0px; margin-left: 10px;

width: 216px; height: 100%;

float: left;

text-align: left;
}

ul#sidebarmenu
{
margin: 0px; padding: 0px;
}

ul#sidebarmenu li
{

list-style-type: none;
}

ul#sidebarmenu li a
{
text-decoration: none;

color: #4D4D4D;

font-family: Helvetica; font-size:12px; font-weight:normal;

text-transform: uppercase;

line-height: 22px;
}

ul#sidebarmenu li a.active, ul#sidebarmenu li a:hover
{
color: #ee3532;
}

#content
{
margin: 0px; margin-left: 16px; margin-right: 10px;

padding-top: 10px;

width: 686px; height: 100px;

float: right;

text-align: left;
}

.clearfooter
{
height: 100px;
clear: both;
}

#footer
{
width: 940px; height: 30px;

margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px;

position: relative;

color: #b4b4b4;

font-family: Helvetica; font-size: 12px; font-weight: normal;
}

ul#footermenu
{
margin: 0px; padding: 0px;

text-align: center;
}

ul#footermenu li
{
display: inline;

padding-right: 10px;
}

ul#footermenu li a
{
text-decoration: none;

color: #b4b4b4;

font-family: Helvetica; font-size: 12px; font-weight: normal;

text-transform: uppercase;
}

ul#footermenu li a.active, ul#footermenu li a:hover
{
color: #ee3532;
}