3 ways to crop Images in Squarespace Using CSS

Looking for a way to spice up your web design layout? There are so many fun CSS tricks you can use that are easy to implement and will give your website the WOW factor. 

CSS is great because just when you think you’ve hit the limit of what Squarespace has to offer when it comes to design, CSS brings you into a whole new universe of possibilities. CSS can be complex but it can also be simple. 

In this post, I will show you three different interesting ways to crop your images using CSS. Have you been wondering how to do the image arch crop - a trend that everyone is obsessed with? Well, I’ll give you the exact code you need to make it happen! I will also give you the code for how to crop your image into a circle, oval, and triangle. 

Now, you might be wondering, 'Can’t I just do that in Photoshop or Canva?’  Yes, but there are a few reasons why you might want to do it using CSS.

One reason is that you might want to switch to a different style of cropping or switch back to your original photo. So instead of having to switch back and forth between programs or saving 100 different versions of your photo and re-uploading them to see which one looks the best, you can just do it all live with CSS. Then you can also make small tweaks to make it exactly how you want. 

Another reason might be that when you crop a photo in Photoshop or Canva, you might not get the clean, crisp edges you are looking for. Using CSS will ensure that you keep those clean edges from the original image. 

Let’s get started! 

For this tutorial, you will want to add the Squarespace Id Finder extension to your browser. After adding the extension, you’ll want to open the custom CSS window. You will find it under the Design tab in the Toolbar.

At this point, you probably already have a design with a few images, So let's find the IDs of those images. To find the ID of an image that you will use in the CSS, go to your Squarespace page and activate your Squarespace ID finder. You will see the icon in the upper right-hand side of your browser next to your search bar. Once you have the Squarespace ID finder activated, it should look something like this -

As you can see, the Squarespace ID finder, allows you to identify each element on your page. Pick an image that you would like to crop and click on the ID. By clicking on the ID, it will automatically be copied. Once you have the ID copied, go back to your CSS window and paste the ID.

Let’s start with our first cropping method!

Arch

For this crop, you will want to have an image with an aspect ratio of 3:4. To make your image 3:4 aspect ratio you will want to crop before you crop! You can do this right in Squarespace by going into edit mode, hovering over your image, click Image Editor, and choose 3:4.

Now, go to your CSS window where you pasted the image ID and copy and paste this code. Be sure to replace #block-id with your individual image ID but be sure to keep ‘img’ before the bracket.

#block-id img{
   border-top-left-radius: 50% 40% !important;
   border-top-right-radius: 50% 40% !important;
}

Gorgeous!

Triangle

With triangle cropping, you can make some really dynamic layouts. Let’s find out how. Start by either using the same ID as your other image or grab the ID of a new image.

For the triangle crop, it really doesn’t matter what aspect ratio you have. Feel free to play around with different aspect ratios and different values in the code for the desired outcome.

#block-id {
   clip-path: polygon(50% 5%, 0% 100%, 100% 100%);
}

This is a fun one to easily play around with so let’s see what happens when you change one of the values.

#block-id {
   clip-path: polygon(100% 5%, 0% 100%, 100% 100%);
}

Okay let’s get crazy and add another line of code. By using the margin value we can push the image all the way to the edge.

#block-id {
  margin-right: -350px;
  clip-path: polygon(100% 5%, 0% 100%, 100% 100%);
 
}

See, this is why CSS is fun! you can experiment with it and come up with some fun layouts!

Circle + Oval

Cropping to a circle or an oval is very similar. the only difference will be in what aspect ratio you use.

So again, find the ID of the image you would like to use and copy and paste it into your CSS.

If you would like your image to be a perfect circle, go into the image editor and change your image to a 1:1 aspect ratio. This will make your image a perfect square. If you want it to be an oval just make sure the aspect ratio is anything but 1:1. If you want it to be a tall oval use a verticle aspect ratio and vice versa.

This code will be used for both.

#block-id img{
  border-radius: 50%;
}

I personally, love the look of the oval!

Don’t be afraid to play around with the CSS and see what you come up with. The thing with CSS is there are so many opportunities for happy accidents, as bob ross would say. If you are interested in learning more code snippets or other Squarespace tips, feel free to take a peek at my other Squarespace Blog Posts. If you have questions or have ideas for other tricks you would like to learn, drop a comment below!

If you are thinking that even with these tips you’ll never be able to pull it off, I get it. It can be overwhelming and it’s okay! That’s what web designers are for. Feel free to check out my services page to see how I might be able to help you while you are kicking a** at building and running your business!