Jump to content

How add .png on top of image

Recommended Posts


Can anyone help please? What's the best way to add a .png image with transparency on top of an image? It's an inline image, not in a summary block or carousel. It seems that none of the image options (inline, stack etc) allow an overlay image though.

The png I'm trying to layer on top is a graphic from my client of 2 fancy coloured script fonts with transparent background. I'd rather add it as an overlay than save it direct to the image for responsive purposes.

Can anyone help please?

So far I can only add it if the image underneath is a background to a whole section. It really doesn't warrant being that big.

I've seen a tutorial for this as hover with CSS. But thought there must be a more straightforward way 🙂 Thanks!

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • 1 year later...

Ive just done that by opening a second image box, importing the transparent png and then positioning that box directly on top of the other image box. Works perfectly.

If you import the original picture image into illustrator, and create an art-board the same dimensions as the picture, place graphics over the top and then export the transparent png as an art board (minus the original pic of course) the two images (your jpg photograph and png graphic image) will both follow the exact same positioning, scaling/fitting commands in SQS.

Edited by DavidStuartBathe
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.