Can't render a background image

[BelowZero]

I'm trying to apply a background image to a nested <div>. The result is as expected in IE9, but nothing is rendered in Safari 5.1.2 or Firefox 3.6.27. Haven't tried it in any other browser.

The html is just this. I want to place a background image in "layer2" :

 

<div id="layer1">

<div id="layer2">

	<div id="layer3">

	...some code	

	</div> <!--layer3-->

	<div id="layer4">

                             ...more code  

	</div> <!--layer4-->			
</div> <!--layer2--> 
</div> <!--layer1-->

 

Here is the css:

#layer2		{
	padding:10px 20px 10px;
	background:url('http://www.tonalproductions.net/test/images/YCC Header.png') left top repeat-x repeat-y;
	border: 3px solid;
	border-color: #ffffff;	
}

I've tried it with a background color and a .jpg file but nothing gets rendered. Although IE9 shows it just the way I want it.

Any ideas? Thanks.

[sunfighter]

http://www.tonalproductions.net/test/images/YCC Header.png

gives:

Not Found

 

The requested URL /test/images/YCC Header.png was not found on this server.

=======================

 

I tried:

#layer2 {

padding:10px 20px 10px;

background-color:green;

border: 3px solid;

border-color: #ffffff;

}

and that does work. FireFox

[smerny]

remove the space in the image url... just checked and i see an image that looks appropriate for what you are doing

[sunfighter]

Now that we know where your background image is I ran your code. Here's a problem "repeat-x repeat-y " does not work! Use one or the other, if you need to use both the code is simply repeat.

 

Here's your CSS with border combined:

#layer2
{
padding:10px 20px 10px;
background: url('http://www.tonalproductions.net/test/images/YCCHeader.png') left top repeat;
border: 3px solid #ffffff;
}

[Guber-X]

you mean this way...

 

http://www.tonalproductions.net/test/images/YCC%20Header.png

 

but the image doesnt appear to be there anyways... but any URLs that have spaces in them should be replaced with "%20"

[smerny]

read previous 2 posts before yours guber

[BelowZero]

Thanks sunfighter!

The repeat-x repeat-y was the problem.

Appreciate your help.