In this tutorial I’s showing you how to use custom CSS to create a block of color slightly offset behind an image.

It’s a fun design technique I’ve seen out there on the world wide web, and totally possible with a little CSS if you don't have the programs to create a PNG, or you want to save time and code this for all the images on your site instead of recreating every one!

Pro Tip: You can do this to just one image using the block id. Here is a link to the chrome extension I use to easily find block ID’s in Squarespace. *Please note I am not affiliated with them in any way, I just use this extension in my own work!

The code from this tutorial is a basic box shadow code that you can use to create a solid block of color behind an image. While most images respond to the code .sqs-block-image img to create this effect, poster images do not! 

Here is a list of codes for each of the 6 main image types.

Adjust the horizontal offset, vertical offset and color to suit your site style. And yes, box shadows have many more options in CSS, but those are the three settings we are using for this specific design effect. 😉

All images, except for posters:

.sqs-block-image img {box-shadow: 15px 15px #50bdb8}

Card Layout:

.design-layout-card img {box-shadow: 15px 15px #50bdb8}

Overlap Layout:

.design-layout-overlap img {box-shadow: 15px 15px #50bdb8}

Collage Layout:

.design-layout-collage img {box-shadow: 15px 15px #50bdb8}

Stack Layout:

.design-layout-stacking img {box-shadow: 15px 15px #50bdb8}

Poster Layout:

.design-layout-poster {box-shadow: 15px 15px #50bdb8}

To isolate just one image, place the block ID before the code example above, like this:

#block-yui-123456789 .sqs-block-image img {box-shadow: 15px 15px #50bdb8}