Streaming live at 10am (PST)

How to Create Avatar


#1

How to create avatar profile (Circle) the one that we usually see here in webflow forum, I tried to create my own but I use a div block and put 100px for the border to make it circle and then add the image as a background. Do you think thats good?


#2

yup. but one thing I would suggest is instead of 100px for the border-radius, use 50% for a perfect circle no matter how big or small the width and height are. smile


#3

Thanks, I have another question, when I use this method, I cant save and drag the image, I mean I cant use the "save as" option when right clicking and when you drag the image. Do you have some option if we can use the crop instead of using image as background?


#5

There was some bad code: I ll give it another try:

Insert image and give it a class e.g. "avatar".
Then goto your Dashboard, Custom Code and insert into the "Head Code" field the following:

<style type="text/css">
.avatar {  
  position: absolute; /* absolute or fixed positioning required */
  -webkit-clip-path: circle(140px at center) }
  -moz-clip-path: circle(140px at center) }
  clip-path: circle(140px at center) }
} 
</style>

Change the 140px to whatever the image requires and so on.


#6

not really, thanks I think this works for now.


#7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.