Simple tutorial on how to add a badge image on MyFreeCams profile page using html copy/paste code

In this short tutorial we will learn how to add a custom image “badge” on MyFreeCams profile page using simple but powerful HTML code and inline css.

For this demo we need a badge image and we will use one from this set, ready-made badges for MFC .


Ok, first step we have to do is to host the image and copy the full direct path (the url)

This image will stick to the upper-right corner of your profile, even if you scroll down until you see the footer section the badge image will be visible (that means a “sticky badge image”)

There are 3 methods to  create the code for this sticky image, but we will use the easiest, fast and simple one.

Because we want to display this image as a sticky badge we have to wrap it inside HTML element (div or layer)


<div style=’position: fixed; width: 81px; height: 151px; top: 0px; right: 3px;’><img src=’http://css-mfc-profile.design-xpro.com/wp-content/uploads/2013/06/cssmfcav.jpg’/></div>

position: fixed – this will make the div fixed to the top margin of your browser window

height, width – size given to the html div element (the image is 80x150px)

top, right – informs the browser where to display the div element and it’s content.

Like I’ve already mentioned above… copy/paste simple HTML-CSS code.