Recalcitrant CSS background-image

Rails
1

My app has a stylesheet that includes this definition:

div.loadimage
{
width:580px;
height:310px;
background-image: url("/images/load.gif") no-repeat center 0% 0%;
}

The purpose is to use with some nice javascript by Patrick H. Lauke for
fading in images. The div is supposed to include a “loading image” image
which is overwritten by the final image when it has finished loading,
and this takes a moment as the image that finally appears is generated
thus:

Graph for <%= @name -%>

Anyway, the loadimage div absolutely refuses to display an image so all
I see is an empty space in which the graph eventually appears. Even if I
use this div it in other locations, e.g. around text or a table, the
load.gif image will not appear. However, an img tag pointing to the
load.gif image will display it as normal.
Is this because I have made some error with the definition in the
stylesheet, or could there be some other problem?

2

Try this instead

background: url(/images/load.gif) no-repeat center 0% 0%

I hope that helps,

  • Mike

On Apr 1, 4:01 am, Milo T. [email protected]

3

[email protected] wrote:

background: url(/images/load.gif) no-repeat center 0% 0%

Unfortunately that does exactly the same, i.e. no background image is
ever seen wherever the div is used.
Thanks for replying, though.

4

On Tue, Apr 01, 2008 at 01:38:41PM +0200, Milo T. wrote:

[email protected] wrote:

background: url(/images/load.gif) no-repeat center 0% 0%

Unfortunately that does exactly the same, i.e. no background image is
ever seen wherever the div is used.
Thanks for replying, though.

Hi,

if you have your stylesheet in a separate file, set the path to
your image relative to the css file.

Greetings
Mario

5

Mario G. wrote:

if you have your stylesheet in a separate file, set the path to
your image relative to the css file.

Still no luck with that I’m afraid.
I also tried replacing the link to the image with a background colour
change and that doesn’t work either - it seems that the entire div is
ignored.

6

On 1 Apr 2008, at 14:10, Milo T. wrote:

Mario G. wrote:

if you have your stylesheet in a separate file, set the path to
your image relative to the css file.

Still no luck with that I’m afraid.
I also tried replacing the link to the image with a background colour
change and that doesn’t work either - it seems that the entire div is
ignored.

Is it just been covered by the image? if you style the div so that it
is bigger than the image do the bits not covered by the image show the
background ?

Fred

7

On Tue, Apr 1, 2008 at 6:33 AM, Milo T.
[email protected] wrote:

ignored. However, the stylesheet must be being read as other parts of it
(e.g. table formatting) still work on the same view.
Most odd indeed.

Have to ask: have you validated both your markup and CSS? I often
find wierd problems like this being due to a simple typo on my part –
missing ending quote, or whatever; validation usually catches those.

HTH,

Hassan S. ------------------------ [email protected]

8

Frederick C. wrote:

if you style the div so that it
is bigger than the image do the bits not covered by the image show the
background ?

It appears not - re-sizing the div has no effect upon anything, even if
I make it an enormous size. It still appears as if the div is completely
ignored. However, the stylesheet must be being read as other parts of it
(e.g. table formatting) still work on the same view.
Most odd indeed.

9

On 1 Apr 2008, at 14:40, Hassan S. wrote:

find wierd problems like this being due to a simple typo on my part –
missing ending quote, or whatever; validation usually catches those.

Oh and use firebug: you can see exactly what styles are being applied
and fiddle around with them interactively.

Fred

10

Hassan S. wrote:

Have to ask: have you validated both your markup and CSS?

Until I added this particular div definition, yes…
However, I tried again following your suggestion and it seems that it is
the div definition that is in error. Re-working it to look like this has
done the trick:

div.loadimage
{
background-image: url("/images/load.gif");
background-position: center;
background-repeat: no-repeat;
width:580px;
height:310px;
}

Thanks, everyone, for your comments.

11

Try removing the image tag first, then seeing if it displays. My guess
is the image has a white background at first… which is causing the
background image to not show through.

Julian

Learn Ruby on Rails! CHECK OUT THE FREE VIDS (LIMITED TIME) NEW VIDEO
OUT 3rd APRIL
http://sensei.zenunit.com/