Round images on your web-site

There are two main ways of to how to add round images to your web-site.

First you have to remember that all images are square or rectangular regardless if they are visual as such.

The first option and possible easiest as no code involved is making an image with a transparent background. You create your image in an image editor such as Photoshop, GIMP or similar. You cut away the spaces you would like transparent i.e. if you have a circle and you would select and delete the corners of the image. You then have to save it to a format that can handle transparency. JPG format has always a solid background so you should instead save it as a PNG (GIF also works but can sometimes leave a border so PNG is best).

Next you just upload it as an other image to your web-site and you will see the background behind the “corners” so that the only thing visible is the circle in this case.

Once you have done this a few times you will get the hang of it and can create images with semi-transperancy and or other shapes.

If you would like detailed interactions of how to do do this or other image work there will soon be How to.. modules to help you along.

Second option is to add a class in your CSS/stylesheet. Some themes and builders allows you to do this directly in their editors but if you have not got such a theme or builder you have to work in the CSS/style sheet directly and you should know a little how this works before you go ahead. (Just make sure you are using a “child theme” or adding this in your theme’s “Additional CSS” otherwise it will be lost next time you update your theme.)

Let’s call the class “round”.

In your CSS/style sheet you would enter the class that will work on your images i.e.

.round img {}

You also have to add the fact that you want the “borders” to de round, i.e.

.round img {border-radius:50%;}

Now you can call this class up in your page editor i.e.
<img src=”http://www.thelinktoyouruploadedimage.jpg” width=”300px” height=”300px” class=”round” />

Now when the image is shown on the web page it will have 50% borders and in other words your square image will be round. Note the image has to be square otherwise it will become oval instead of round.

For any questions please do not hesitate to contact me on thespace@jkqdesign.com