This banner is more complicated than you'd think. :drgn_mlem: I wanted to give the header a banner-colored background that (almost) never looks disconnected from the banner.
Your first instinct probably would be to make the header transparent and add some empty space to the top of the image, but then then the padding scales with the image and you get a humongous padding on wide viewports and a way too small padding on narrow viewports.
My solution is a border-image which uses a 1px slice from the banner image. It scales exactly how I want most of the time.
I was able to turn it into an SVG file. :foxjump: Or rather, I fixed Affinity Designer's export which discarded layer blending modes even though SVG supports these. I really don't see why it wouldn't export them.
@fell I meant that you have to add empty space to the image with the same color as the background. You do this in the image editor, so I wanted to clarify that I'm not talking about a CSS padding.
@volpeon Well, the only think I could think of is giving the image a large margin. Then, you can set it as background of a div and essentially crop it.
Edit: Doesn't SVG have a property for the background color? 🤔
Add comment