I have a site that I finished back in the summer, but still have a niggling problem that the background image on the h1 does not show in Firefox. It is all the more bizarre given that another site that I designed, with a similar bg image on a h2 works perfectly in Firefox.

 

 

The site is Pencefn Feeds

 

The h1 css is

 

h1 {
  color: #000033; 
  font-size: 15px; 
  text-align: left; 
  line-height: 1.5em;
  margin: 0 0 0.5em 0;
  background: url(uploads/Clean_Orange/h1 header.jpg);
  height: 30px;
  padding-left: 44px;
}

 

This h1 sits inside a div

 

div#h1bar {
  float: right;
  width: 600px;
  display: inline;  /* FIX IE double margin bug */
  /* margin-left: 0; */
}

 

Firefox does not pick up the image at all - not even when I 'View Image Information' in the Web Developer toolbar.

 

The other site is World Sheepdog Trials and the h2 css is

 

#content h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
padding: 6px 0px 5px 0px;
background: url(uploads/andreas01/h2_bg.jpg);
}

 

I have tried all sorts, but am now totally at a loss as to why a seemingly simple piece of css does not work!

 

ANy help would be gratefully appreciated.

It because you have a space in the filename. You just need to wrap the path to the image in quotes:

 

background: url("uploads/Clean_Orange/h1 header.jpg");

Thank you so much for that. I knew there would be a simple solution! Thanks a lot