When I view my local site. e.g. clicking on the index.html it appears in the browser, but doens't show the background images. When I turn on 'edit css' feature of the web dev toolbar suddenly they show up.

 

What's going on here? It seems there is a simple fix.

 

My css:

/*

Designed by: Andrew Welch
Date: 11/5/2009

Primary colors:

white: #ffffff;
gray: #4b4d4a;
black: #444444;

*/

html
{
   background: url(images/bggrid.jpg) no-repeat top center;
}

body
{
   font-size: 90%;
   font-family: georgia, helvetica,sans-serif;
   line-height: 1.6em;
   text-align: center;
   color: #444444;
}
ul, li, img, body, html
{
   margin: 0;
   padding: 0;
}
a
{
   text-decoration: none;
   color: #444444;
}
a:hover
{
   text-decoration: underline;
}
a img
{
   border: none;
}
h3
{
   color: #444444;
   margin: 0;
   padding: .2em .5em;
   text-transform: lowercase;
   font-weight: bold;
   font-family: helvetica, sans-serif, arial;
}
h2
{
   font-family: georgia;
}
.fr
{
   float: right;
}
.fl
{
   float: left;
}
#container
{
   text-align: left;
   width: 1020px;
   margin: auto; /* add background */
}
#container ul
{
   list-style-type: none;
}
#header
{
   position:relative;
   overflow: hidden;
   background: url(images/header.jpg) no-repeat top center;
   height: 280px;
}
#header h1
{
   display: none;
}
#header ul#navList
{
   margin-top: 215px;
   margin-left: 45px;
}
#header ul#navList li
{
   display: inline;
   text-align: left;
   text-transform: uppercase;
   font-family: sans-serif, helvetica, arial;
   font-size: 1.4em;
   padding-right: .6em;
}

/* MAIN CONTENT */

#mainContent
{
   padding: 0 0em;
}

#mainContent div
{
   overflow: hidden;
}
#tier1
{
   margin-bottom: 1em;
}
#tier1 div, #tier2 div
{
   padding: 0 0.4em;
}
#mainContent #tier1
{
   height: 320px;
}
#tier1 #welcomeText
{
   float: left;
   width: 300px;
   margin-left: 40px;
}
#tier1 #featured
{
   float: left;
   width: 620px;
}
#tier2
{
   float: left;
   background: url(images/contentFeatures.jpg) no-repeat top center;
   width: 1020px;
   height: 420px;
}
#tier2 h3
{
   color: white;
   padding: .2em;
   margin-top: 83px;
}
#tier2 div.first
{
   width: 300px;
   float: left;
   margin-left: 48px;
   height: 385px;
}
#tier2 div.second
{
   width: 300px;
   float: left;
   height: 385px;
   margin: 0px 5px 0px 5px;
}
#tier2 div.third
{
   width: 300px;
   float: right;
   height: 385px;
   margin-right: 15px;
}
#tier2 div p
{
   margin-top: .3em;
   padding: 0 .5em;
   text-align: left;
}

#header #mailingList
{
   position: absolute;
   right: 2.5em;
   top: 1em;
   color: white;
   font-weight: normal;
}

#footer
{
   background-color: #4b4d4a;
   width: 1020px;
   overflow: hidden;
}


/* #header p {margin-top:40px;  margin-bottom:0px; margin-left:280px; width:400px; letter-spacing:.20em; font-size:1.1em; display:none;} */

i find by adding " ./ " to the front of an image in the css, it shows, so it would be

background: url ('./images/image.jpg');

Thanks for that

 

I actually added ../ and that worked

 

Cheers

 

Andy

 

 

i find by adding " ./ " to the front of an image in the css, it shows, so it would be

background: url ('./images/image.jpg');

Now the images don't show up in the web dev edit css function - what's going on here then?

 

It's a very useful tool.

 

Andy

 

Thanks for that

 

I actually added ../ and that worked

 

Cheers

 

Andy