Combine border image and background?

[Linda_A]

I am using border image to apply a jagged edge to each section of my site. To get the right look, I use border image with the fill property.

My question is whether it is at all possible to “overlay” the fill of the border image with a background image? I was hoping to apply a semi-transparent background image to the header, but the border image seems to override it.

Relevant code:

http://codepen.io/Linda_A/pen/QKbYKq

[Paulie_D]

I confess I’m not sure what it is you are trying to do.

Borders are on top of element backgrounds so you can’t overlay them with a background image.

That doesn’t stop you having a background image to the element though…you just have to remove the fill and apply the image.

Now as I said, the image would normally stick out under the border but you can fix that by applying background-clip:padding-box.

http://codepen.io/Paulie-D/pen/vXObby

[Linda_A]

I had a feeling that might not have been the best explanation in the world, let me see how to better put it …

Well, okay, if you look at the header area of http://www.westeros.org, you can see how it uses a border image with a lighter colour than the main background of the site, to get the effect of one piece of paper on top of another (that’s the intent, anyway!).

Note also the two shields to the left and right of the title. Lets say I wanted to apply these as fixed background images rather than as actual image elements. Is there any way that these could appear on top of the border image fill, or will that always appear on top, even if the background is applied to elements within the header, rather than to the main header element (the one that has the border defined)?

I am suspecting from your answer that the border will always appear on top even for elements within the header, but I am not entirely certain.

[Paulie_D]

I am suspecting from your answer that the border will always appear on top even for elements within the header

Yep…if the image is a background image it’s UNDER the border.

[Paulie_D]

…but…you have two divs one on either side….why not use a background image there?

http://codepen.io/Paulie-D/pen/dpoLNq

[Linda_A]

I had actually tried that, but I must have done something wrong because I didn’t get them to show up, which led me to think the border image was ending up on top of those too. But yes, clearly that should work.

Thanks for sorting that out for me. :)

[Author]

Posts