- This topic is empty.
September 8, 2016 at 11:08 am #245356
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:September 8, 2016 at 11:53 am #245360
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
filland 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.September 8, 2016 at 1:24 pm #245365
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.September 8, 2016 at 1:50 pm #245366
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.September 8, 2016 at 1:56 pm #245367
…but…you have two divs one on either side….why not use a background image there?September 8, 2016 at 1:59 pm #245368
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. :)
- The forum ‘CSS’ is closed to new topics and replies.