Create a Circular image in Codepen

Create a Circular image in Codepen
0

#1

Hi guys, working on my tribute page project and i just cant seem to create a circular image.

I have tried using the Bootstrap .img-circle class and also the CSS border radius 50%. I am sure i have something simple wrong.

Please see the codepen below:

https://codepen.io/wilso/pen/zPLBXK/strong text

Screen Shot 2017-11-28 at 22.00.35


#2

You have 2 image tags, not sure why or which one you want to keep, but take out the img-circle class from the first tag and apply it to the second and it will work. (you also have some syntax error in your first img tag, so take it out all together)


#3

Review the img tag syntax. Especially how to include the src and how to close the tag.


#4

I did it! it seems like when i copy it from Photobucket it adds that 1st image tag on?

Seems to be coming out as more of an oval, but thats the next challenge!

Thanks so much for the speedy help :slight_smile:


#5

It’s oval because your image is not square. A perfect square with rounded edges becomes a perfect circle :slight_smile:


#6

Got it! all fixed thanks again