Sivakatirswami
asked on
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.j
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.
the header is set to this background image via CSS:
#header{
height:107px;
background-image: url('assets/img/masthead.j
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
did my solution worked? Or is the problem still persisting? Please update
ASKER
Yes, it worked. I thought I had accepted your solution before... I did again, just now, Thanks Gurvinder.
ASKER
I am usually good about using root relative paths
this works:
background-image: url('/assets/img/masthead.
Thanks...