CSS multiple Background Images both repeat-x

Question

I try to get multiple background images in one div at the moment. Both must repeat-x.

The first image should start at the top-left point up to 50% of the div.

The second should start at the middle to the right end of the div.

I tried the following:

.myDiv {
    background-image: url('image1.png'), url('image2.png');
    background-repeat: repeat-x, repeat-x;
    background-position: left top, center top;
    background-size: 50% 100%, 50% 100%;
}

My problem is that only image1 is shown.

Answer 1

Try with that background: url('image1.png'), url('image2.png'); instead of background-image:

Here is a demo in Jsfiddle

You can see both images appear.

Hope it hepls

Answer 2

Set two background images for the any element like this

 background: url(number.png) 600px 10px no-repeat, /* On top, like z-index: 4; */ url(thingy.png) 10px 10px no-repeat, /* like z-index: 3; */ url(Paper-4.png); 

Answer 3

Thanks to Devilquest. I was having issues with "top repeat-x , bottom repeat-x" for 2 images in one div. Works on Chrome, fails on IOS. Swapped to

 background: url ();
 background-repeat: repeat-x, repeat-x;
 background-position: top , bottom;

and now working fine on safari, iPhones etc