two css header images, one repeating, one finishing

I am still learning css and I have the following line that will create a header with no ending image...

#header {position:relative;background:#fff url(../images/header.gif) repeat-x 0 100%}

Now i want to add a ending image on this to make the complete header, but the following try doesn't work...

#header {position:relative;background:#fff url(../images/header.gif) repeat-x, url(../images/headerend.gif) no-repeat;}

Am i missing something?

Here are my references...

http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css
http://icode4you.net/css-tricks-use-two-background-images-for-one-div

 

CSS3 does allow for it, but to be honest I still wouldn't deploy that way -- I'd break down and throw an extra element to receive that background instead.... like a DIV or SPAN.

Or maybe see if there's some other element already on the page that you could target for it... like say the H1 inside that DIV#header... though most of the time that's why I don't waste a DIV around header elements... plenty of perfectly good elements inside it, why do we need a wrapper?

 

Is there a reason why that line of code doesn't work?

 

If you are looking at it with IE8 or earlier it won't work because multiple backgrounds are not supported on old junk. If you are looking at it in IE9 it might still not work if you are not using a strict doctype.


It is not a good idea to use multiple backgrounds anyway.

 

solution is simple:
#header {
width: 850px;
height: 120px;
background: #FFF url(header.jpg) repeat-x;
}

.header2 {
background: url(header2.jpg) no-repeat;
}

ON HTML BODY:

<div id="header" class="header2"></div>

OR

<div id="header">
<div class="header2"></div>
</div>