diff --git a/src/app/community/community.component.html b/src/app/community/community.component.html
index a47f80e..683c4a0 100644
--- a/src/app/community/community.component.html
+++ b/src/app/community/community.component.html
@@ -149,7 +149,8 @@
   </ng-template>
 
   <div *ngIf="communityInfo && community && !isPrivate()" >
-		<div *ngIf="communityInfo && community" class="generalSearchForm"> <!-- this div will have the customized color or image -->
+		<div *ngIf="communityInfo && community" class="generalSearchForm heroBackground"> <!-- this div will have the 
+		customized color or image -->
 			<div class="uk-container uk-container-large uk-flex uk-flex-center">
 				<div class="uk-width-2-3@m uk-width-1-2@l uk-margin-large-top uk-margin-large-bottom">
           <h1 *ngIf="community.title" class="uk-text-center uk-h2 uk-margin-remove">
diff --git a/src/assets/community.less b/src/assets/community.less
index d3aaff7..0247b36 100644
--- a/src/assets/community.less
+++ b/src/assets/community.less
@@ -6,7 +6,8 @@
 
 @global-primary-gradient: none;
 @general-search-form-background: fade(@global-primary-background, 15%);
-
+@hero-background-image: none;
+@hero-background-position: top center;
 #joinAndInviteBtn {
   position: fixed;
   right: 0;
@@ -49,3 +50,8 @@
     color: @button-primary-color;
   }
 }
+
+.heroBackground{
+  background-image:  @hero-background-image;
+  background-position: @hero-background-position;
+}