Easy way to create this text overlay?

I’ve been trying all day to recreate a similar look to this image. Specifically, the header type text with the coloured background only under the letters, and not the whole stack background. I’ve been trying in Source and Foundation plus other stacks like Overlap Canvas, but can’t crack it.

Any help would be greatly appreciated is someone knows an easy method!

Foundation 1 or Foundation 6?

Foundation 6

I use the Position stack in Foundry but it’s more a relative position and not completely fixed. That makes it quite powerful to be honest although with thet image you have it might be easier/quicker just to do it all as a graphic image.

1 Like

Is that a full browser ‘hero header’ or just an image with the text boxes over it?

Have you looked at the F6 hero header template to see if you can adapt it to your needs?

Something like this maybe? I started with the hero header template and made a few changes.

1 Like

Here’s how I would do it in Source. There are various ways to do it though.

Click into the Heading stacks to see how the colours have been applied.



For the text

try header pro from big white duck or

Marks from

For overlap the canvas stack should work if not try blueprint from big white duck

Or like this, Foundation 6 and the Target stack. Not sure what font you are using, this is Google Anton.

Stuart - this is perfect - exactly what I was looking to do with Source - many thanks!

I’ll digest it and see how you applied the settings!

Again - thanks!

1 Like

Thanks everyone for your help and suggestions! Much appreciated!

Agree with your comment about a graphic image.
I’ve created several in ‘Pages’ - it’s quite versatile. Normally export as pdf (to desktop), duplicate as jpg or png then add to resources.