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

Posted on 2011-02-28
Medium Priority
Last Modified: 2012-05-11
see: http://dev.himalayanacademy.com/new-dom.html

the header is set to this background image via CSS:

      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.
Question by:Sivakatirswami
  • 2
  • 2
LVL 40

Accepted Solution

Gurvinder Pal Singh earned 2000 total points
ID: 35003830
replace this url by

since it was looking inside the css folder

Author Comment

ID: 35004037
Jai Ganesha! Duh...(foot in mouth!)

 I am usually good about using root relative paths

this works:

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


LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 35004396
did my solution worked? Or is the problem still persisting? Please update

Author Comment

ID: 35022335
Yes, it worked. I thought I had accepted your solution before... I did again, just now, Thanks Gurvinder.

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

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.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

600 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question