Place a graphic behind a heading

I’ve got a ‘ship’s wheel’ sort of emblem that I’d like to put behind an H1 header. The graphic is 50% transparent, and needs to sit behind the centre of the header, so it sticks out a little top and bottom.

Here’s what they look like.


Can anyone give me a steer as the best Foundry stack to use for this?

Thanks

Rob

On my phone so I can’t provide examples right now, but you could go a few ways I think. Overlap stack is the first thing that comes to mind. This could be tricky keeping things lined up at each breakpoint.

You could also use the Backdrop stack for the image and put a Vertical Align stack inside of it, setting a height at each breakpoint. Then drop your header stack inside of it.

Do you mean the Vertical Center stack, Adam?

Yea sorry. Vertical center. :+1:

1 Like

Thanks Adam. The issue with using Backdrop is that the image fills the width of the stack instead of staying at its ‘true’ size (200x200) - see attached.

I think I’ve managed to get where I need to be with BluePrint One, though.

Cool. Looks good. Did you give Overlap a shot? Just wondered if that was a no-go, too.

I didn’t Adam. Blueprint just seemed the way to go. If there’s some time left over in the build I’ll give it a whirl. Would always prefer to stick inside the ecosystem if possible.

Thanks

Rob

Overlap should work.

The Position stack would also work well for this.

1 Like