Question

I have a 3 elements stacked on top of each other. The top element is the overlay content. The second element is a background border image. The bottom element is a background.

What I want to do is hollow out the middle element, so that I can see through the top element into the bottom element, but leave the border of the middle element surrounding the top element.

http://jsbin.com/unimux/4/edit

As you can see the middle element is blocking the view to the bottom element.

Edit: I did try using border-image but it wouldn’t render correctly for me with border-radius.

Edit2: is it possible to get the desired effect with border-image? Kudos to anyone who can make it look not terrible with border-image.

Edit3: Some progress based on Zuul’s answer:
http://jsbin.com/unimux/15/edit

Answer 1

Setup a new element, with a class, e.g., .apple and place it over all other existent elements with the same image as the bottom one:

See your JS Bin Example Altered!

  div.apple {
    margin: 100px;
    width: 200px;
    height: 200px;
    background: url(http://www.ipadwallpapersonly.com/images/wallpapers/1gk0rv4ng.jpg) center center;
  }

Having the image centred and by give a correct margin value, it simulates the “hollow” effect at the div.middle.

See the result preview:

---

If the elements dimensions aren’t the same, the use of CSS position helps keepping everything into the proper place:

An example here!