DIV within a DIV with a background image problem.

[IJoeR]

This is such a lame thing I can't comprehend why in the world simple coding things like this don't work.

So I have some code like this:

<div id="1">
<div id="2">
<div id="3">
Some HTML code goes here.
</div>
</div>
</div>

My CSS code is something like

#1 { width:100&#37;; text-align:center; }
#2 { width:750px; margin-left:auto; margin-right:auto;}
#3 { background-image: url(mybackground.jpg); background-repeat: vertical-x; }

So all of this works in IE 7, but the background image doesn't show up in Firefox for PC, Safari - MAC, Firefox MAC...

Why doesn't the background image display -- this should be something that just works -- there isn't anything crazy there.

Let me know your thoughts.

[buildakicker]

Hello,

I haven't used the Verticle:X function...

Try this:

	background-image: url(images.gif);
	background-repeat: repeat-x;
	background-position: left top;

[Paul O'B]

There is no such thing as vertical-x

Its repeat-x or repeat-y or repeat.

Use shorthand and it save a load of code:

background: url(images.gif) repeat-x left top;

()BTW you can't start id's with a number either even though i know that it was only for example )