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-radius50%;
  2. width150px;
  3. height150px;
  4. marginauto;
  5. displayblock;
  6. padding5px;
  7. text-aligncenter;
.profileBadge li {
  1. text-transformuppercase;
  2. list-stylenone;
  3. line-heigth1.4px;
  4. text-aligncenter;
  5. padding5px;
.profileBadge {
  1. border1px solid #ddd;
  2. border-radius4px;
  3. padding5px;
  4. background-repeatno-repeat;
  5. background-imageurl(http://yourCoverImageUrl.com/image.jpg);
  6. background-size100%;
  7. background-position0% -20%;