How do I make an image circular?

This FAQ will teach you how to use the Jack stack to make an image into a circle. This circle image will not be responsive, but should still fit inside a mobile device. For images over 320, we suggest you edit the image and make it circular with something like Photoshop or Pixelmator.

1. Add a Jack stack to your stacks page.

2. Add an image to the Jack stack.

   

3. Adjust the Jack - Layout settings so that you give the image a static width and a static height. You want to make it close to the image size, in the example below, my image is 200px x 200px so I set my static width and height at those settings. You might have to play around with those settings to get it looking correctly.

   

4. Depending on your image, you may want to add a border, so you can see the circle. In my example, I will need to add a border. If you do not need to do this step, just skip it.

5. We need to set a border radius. You will want to check the box marked Detailed Rounding?. The default setting for this is in pixels (px), you will need to change this to percentage. Then set every area, (Top Left, Top Right, Bottom Left and Bottom Right) to a setting of 50.

Your image should look something like this now:

It is OK if it does not look circular in edit mode, just preview the page and it will look perfect.

Using Background Image, Texture, Color or Gradient

You can also do this with a background image or texture. Here are the instructions on how to do it this way.

1. Add a Jack stack to your stacks page.

2. Go to the Jack - Background settings and change the Type from None to Image (or you can choose Color or Gradient).

   

3. Add your image or tiled image (texture) to the image well in the Background settings. Depending on your image, you might have to adjust the Image Size, Image Repeat and Position settings to suit your needs.

   

4. Follow the rest of the instructions like above (set a static height/width, adding a border or not, set the border radius). Some of these settings may need to be tweaked a little more. When you are done, you should have a final result that looks like this:

You might notice that when using it as a background image, you can still put other content on top, so you could add images on top of other images, or text on top of images. It is all up to you.

Now go forth and make your websites great!!