diff --git a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html
index b58e6b22c9..1362e5f999 100644
--- a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html
+++ b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html
@@ -20,7 +20,7 @@
                     <div class="demo-card-wide mdl-card">
                         <div class="card-title__option mdl-card__title"
                              id="ecm-background-image"
-                             [style.background-image]="'url(' + baseComponentPath + '/../img/orangeBanner.png)'">
+                             [style.background-image]="'url(' + ( ecmBackgroundImage || baseComponentPath + '/../img/orangeBanner.png')+')'">
                             <img class="profile-picture"
                                  id="ecm-user-detail-image"
                                  alt="ecm-profile-image"
@@ -37,7 +37,8 @@
                                   <span id="ecm-email" class="mdl-list__item-sub-title">{{ecmUser.email}}</span>
                                 </span>
                                 <span id="ecm-job-title" class="mdl-list__item-secondary-content custom-role-style">
-                                    <span class="role-label-user">{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}</span>
+                                    <span
+                                        class="role-label-user">{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}</span>
                                     {{ecmUser.jobTitle?ecmUser.jobTitle:'N/A'}}
                                 </span>
                             </li>
@@ -50,7 +51,7 @@
                     <div class="demo-card-wide mdl-card">
                         <div class="card-title__option mdl-card__title"
                              id="bpm-background-image"
-                             [style.background-image]="'url(' + baseComponentPath + '/../img/blueBanner.png)'">
+                             [style.background-image]="'url(' + (bpmBackgroundImage || baseComponentPath + '/../img/blueBanner.png')+')'">
                             <img class="profile-picture"
                                  id="bpm-user-detail-image"
                                  alt="bpm-profile-image"
diff --git a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts
index f63787d645..3ceb7773d4 100644
--- a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts
+++ b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import { EcmUserModel } from './../models/ecm-user.model';
 import { BpmUserModel } from './../models/bpm-user.model';
 import { EcmUserService } from './../services/ecm-user.service';
@@ -31,6 +31,15 @@ import { AlfrescoSettingsService, AlfrescoTranslationService } from 'ng2-alfresc
 
 export class UserInfoComponent implements OnInit {
 
+    @Input()
+    ecmBackgroundImage: string;
+
+    @Input()
+    bpmBackgroundImage: string;
+
+    @Input()
+    fallBackThumbnailImage: string;
+
     private baseComponentPath = module.id.replace('components/user-info.component.js', '');
 
     ecmUser: EcmUserModel;
@@ -72,7 +81,7 @@ export class UserInfoComponent implements OnInit {
     onImageLoadingError(event) {
         if (event) {
             let element = <any> event.target;
-            element.src = this.anonymousImageUrl;
+            element.src = this.fallBackThumbnailImage || this.anonymousImageUrl;
         }
     }