Custom Profile Badge 2 inspired by Linked In

Previously we had made a multi-profile badge which you can find here.

Now comes the version two of this badge. Which is nothing but the same badge with a cover background. Honestly it's just a rip off of LinkedIn profile badges. But since they are limited to LinkedIn, you can use this profile badge to meet your need.

Output of this post will be a profile badge that looks something like this,

Since this is basically a modified version of the previous profile badge we are going to reuse the same code.

Step 1. Define the CSS for circular image, then a CSS for list of links, and then the badge border and a background cover which is nothing but a background image positioned properly.

.profileBadge img {

1. border-radius: 50%;
2. width: 150px;
3. height: 150px;
4. margin: auto;
5. display: block;
6. padding: 5px;
7. text-align: center;

}

.profileBadge li {

1. text-transform: uppercase;
2. list-style: none;
3. line-heigth: 1.4px;
4. text-align: center;
5. padding: 5px;

}

.profileBadge {

1. border: 1px solid #ddd;
2. border-radius: 4px;
3. padding: 5px;
4. background-repeat: no-repeat;
5. background-image: url(http://yourCoverImageUrl.com/image.jpg);
6. background-size: 100%;
7. background-position: 0% -20%;

}

Step 2. This badge uses font awesome, include following link to font awesome css.

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"/>

If you are not sure how to use font awesome further, go here.

Step 3. Go to page layout and add a gadget of HTML/Javascript. If you're on WordPress you need to create a Text Widget and add the following.

<div class="profileBadge">
<img src="YOUR_PROFILE_PICTURE.png" alt="profile_picture" width="200" height="200" />
<p align='center'>Whatever you want to say goes here..</p>
<li><i class='fa fa-google-plus'></i> <a href="http://plus.google.com/u/0/+YOUR_USER_ID">YOUR_USER_ID</a></li>
<li><i class='fa fa-instagram'></i> <a href="http://instagram.com/YOUR_USER_ID">YOUR_USER_ID</a></li>
<li><i class='fa fa-facebook'></i> <a href="http://facebook.com/YOUR_USER_ID">YOUR_USER_ID</a></li>
</div>

With a little modification to the code above you can also make it look like this,

What I did was just included the icon and link in the same link row. 

That's it.

And in case you are wondering what is that image I am using as cover. It's Blink from X-men Days of Future Past fighting the Sentinels.

I'm using a smaller version of this image, just to reduce the load on my visitors. Let me know your thoughts.