Fall-back background with border-image

[SamA74]

Here is one I have not figured out.
Suppose you are using a content container element which uses a border-image for its border and background. The border has an alpha channel to show parts of the underlying element with an irregular pattern. The content show up OK on the background, but in the event that the border image file fails to load for any reason, the content is seen on the background of the element beneath and is not so clear.
The first thing I tried was the obvious addition of a background-color` on the container. The problem is, that background shows in the border which spoils the effect of having the alpha channel.
The question is (and I think I may already know the answer): Can you stop the background colour from showing in the border area?
Or is there any workaround for this?

Here is an example Pen to illustrate (and provoke tinkering).
The first div displays as wanted, the second has a background-color which is seen in the border.
To test, corrupt the url for the border-image to see how it looks when the image fails.

[SamA74]

OK, I think I got it.
Good ol’ pseudo elements.

Amazing how the answer comes to you when you think out loud make a topic.

[PaulOB]

How about:

.two {
  background-color: #def;
  background-clip: padding-box;
 }

[Gandalf]

I’ve often wondered what one might use border images for. This is a great example, Sam.

[SamA74]

Background-clip, that’s a new one on me. Just the ticket, much cleaner than the pseudo element hack. Thank you.

[SamA74]

@Gandalf

I’ve often wondered what one might use border images for.

It can be used for some interesting decorative effects if images are properly prepared, as I found out here.

Put that into a Pen now for easy viewing.