Send image in :before pseudo element behind of element

I was inspired by Multiple 开发者_C百科Backgrounds with single element and try to do that...but failed.

This is my sample code in jsfiddle.

Image(blue bird) in the :before element never goes down to main(white bird) element. Here goes what I tried with :before.

• content:url() or background:url()
• z-index: -1 or arbitrary smaller number than main's
• :before and :after :(

How can I send it back to main element???

In your first link the schema shows :before and :after backgrounds are on the element's background?? So I think all's good, you just have to invert the two backgrounds.