Profile Banners

The image in the profile banner is added using inline CSS. The recommended solution is to save the banner images in the /images/banner/ folder using the person's full name separated by dashes. Example: bob-smith.png. Then update the inline background image on the .profile-banner div. It should look like the following example: <div class="profile-banner" style="background:url(/images/banner/bob-smith.png) no-repeat right bottom">

Creating The Banner

The banner used is a transparent 24 bit png and requires that the headshot be pre-matted with the "swoosh" background before being used. A blank banner is located here: /images/banner/banner-blank.png It is recommended that a graphics application such as Adobe Photoshop be used to isolate the headshot and pre-matt it with the banner-blank.png placing the headshot on the right edge of the graphic. Save the combined graphic as a 24 bit transparent png using the naming convention described earlier.


Source Code:

Example: