Background Image appears in Firefox, but Not Safari - Any Clues

see: http://dev.himalayanacademy.com/new-dom.html

the header is set to this background image via CSS:

#header{
     height:107px;
      background-image: url('assets/img/masthead.jpg');
      background-repeat: no-repeat;
      }

Two problems:

1) it works in Firefox but not in Safari.  Odd. In Safari the div background is blank, empty, nada. Even in Fire fox sometimes it does not load. but if I click on the Web Developers "Edit CSS" as soon as I do that background image appears.

2)  typically I have noticed that images  that are applied to backgrounds in the CSS only render after the rest of the page has loaded. Is there anyway to fix that?

I am running an html5 embedded movie at the top of the page as a "performance" test.
SivakatirswamiAsked:
Who is Participating?
 
Gurvinder Pal SinghConnect With a Mentor Commented:
replace this url by
../assets/img/masthead.jpg

since it was looking inside the css folder
0
 
SivakatirswamiAuthor Commented:
Jai Ganesha! Duh...(foot in mouth!)

 I am usually good about using root relative paths

this works:

background-image: url('/assets/img/masthead.jpg');

Thanks...

0
 
Gurvinder Pal SinghCommented:
did my solution worked? Or is the problem still persisting? Please update
0
 
SivakatirswamiAuthor Commented:
Yes, it worked. I thought I had accepted your solution before... I did again, just now, Thanks Gurvinder.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.