Round Picture Frames, Easy Round Image html

How to make, in an easy way, a round picture and add a frame to it.
At the end of this tutorial I have placed some round picture frames.

1. make your picture square, you can use MS paint for that.

2. add your picture via Add Media on your website.

3. Use this html code, replace the colored parts for your own data in your text editor

4. Go to visual and take a screenshot.

5. Go to paint open the screenshot and cut the round picture.

6. Go to Pixlr.com and make a transparent background ( see previous tutorial)

7. Add the picture in layers at Pixlr.com

8. The result:

Round Picture Frames

found on Google Free for reusing.

I hope you liked this tutorial, click here for more tutorials.

Have you ever thought about creating your own website?

Then this is your chance! We offer you a 7-day totally free premium access to worlds best website builder. Imagine, a website of your own, and you can try this out for free. You build your first website, put in some words of your own, and you can show your website to your mom, husband, wife or children. Wouldn’t that be awesome? The Wealthy Affiliate University gives everybody the opportunity to try their program out for free, no credit card needed. Free = Free!

Comments

Round Picture Frames, Make easy round image html code — 8 Comments

John Worthy on August 24, 2016 at 6:40 pm said:

Thanks Loes. Actually, it’s not the code, I get the image round alright. It’s the pixlr part that gimme troubles, how to get the border around and the grey in the background. When I drop it in paint, I get a white background. Aaargh

Reply ↓
- Loes on August 24, 2016 at 9:07 pm said:
  
  You can easily change the white background in grey, using paint, John. Select the color and use the little bucket, if you can’t manage you may send me the picture and I do it for you:)
  
  Reply ↓
John Worthy on August 24, 2016 at 6:25 am said:

Hi Loes, I told you that I am too stupid to work with pixlr.
Here is what I have.
One portrait image .png 300 x 300 pix no background

Here is what I want

The image in a circle, with a dark grey background and a plain white, small border, like in this sample image.

http://take.ms/HtXZ6

How do I get the grey background in the circle?
How do I get the darn frame around

I was watching your pixlr video about 20 times, the one you show how to remove certain elements, but never could follow your quick movements, and your software, of course, has Dutch titles to all functions.

Maybe you can point me to lessons of yours that clear things up for me

John

Reply ↓
- Loes on August 24, 2016 at 3:03 pm said:
  
  Hi John, as you are not that handy with codes, I am going to send you over to Lunapic to create your round picture in an easy online to use program. Upload your picture, then measure the rounding between 150 and 200, then click on download. Hope to hear from you if it worked for you, have a great creative and productive day, Loes
  
  Reply ↓
Marie on May 2, 2015 at 4:46 pm said:

How cool! It looks so professional. t seems a bit hard to do, but not impossible – I have to try it. Thanks for sharing.
Marie

Reply ↓
- Loes on May 3, 2015 at 1:15 pm said:
  
  Hi Marie, it is easy doable, just go by it step-by-step, I, myself, love round pictures, success, Loes
  
  Reply ↓
Turhan Akyol on May 1, 2015 at 1:34 pm said:

Nice informative post!
Where can i find more industrial looking round picture frames?

Reply ↓
- Loes on May 1, 2015 at 1:42 pm said:
  
  Hello Turhan, you can see on this website if it has something for you, success:) Loes
  
  Reply ↓