multiple background css3: 2 repeated-x images, each taken up half of the container

Question

I have this: http://jsfiddle.net/MAJZz/

what i want is that the red fish to stop at the half of the container, and the green fish to start from there until the end. in other words, the red fish should cover (from 0 to 50% horizontally) and the green fish should cover (from 50% onward to 100% - same, horizontally).

here is my html:

<div></div>

and this is my CSS:

div {
    background: url(http://a0.twimg.com/profile_images/88812997/Redfish_facebook_normal.jpg) repeat-x, url(http://icons.iconarchive.com/icons/fasticon/fish-toys/16/Green-Fish-icon.png) repeat-x;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 500px;
    height: 100px;
}

is it possible ?

thank you in advance.

Answer 1

I think you can use after and before pseudoclasses, if you really need only two backgrounds,

div:before {
    background: url(http://a0.twimg.com/profile_images/88812997/Redfish_facebook_normal.jpg) repeat-x;
    position:absolute;
    left:0;
    width:250px;
    height:100px;
    content:"";
}
div {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 500px;
    height: 100px;
}
div:after {
    position:absolute;
    width:250px;
    height:100px;
    right:0;
    top:0;
    background:url(http://icons.iconarchive.com/icons/fasticon/fish-toys/16/Green-Fish-icon.png) 50% top repeat-x;
    content:""
}