Specifying repetitions and positions for the background when using multiple backgrounds

Question

I am trying to apply two background images. One of them is a repeating block of color, which I would like to repeat along the x axis. The other is just one image that I would like to show only once.

I used several background images to try to get two images applied to the same div, however I'm not sure how to target specific background rules to each background.

Background 1 should have the position of the top and repeated x. Background 2 should have a position from the top right and not repeat.

Is this possible with multiple backgrounds, or will I have to revert to the old way of nesting two separate divs?

JS Fiddle: http://jsfiddle.net/nnq4S/

The gray background should cover the entire top of the container, while the tape should remain in place.

Answer 1

I don't have a test, but does it work?

background:url(bg1.png) top left repeat-x, url(bg2.png) top right no-repeat;