How to add text Box on banner image in esc portal

[nameisnani]

Hi Team - 

IN esc portal - how to add white background box with inside text on the banner

Present HTML and CSS scirpt

HTML 

<div ng-if="data.topic.active" class="topic-container"
     ng-class="{'mobile-border': c.data.isMobileApp }">

  <div ng-class="data.isMobileApp ? 'topic-header-mobile':'topic-header'"
       ng-if="data.displayMode === 'text_only' || data.displayMode === 'icon'">
    <div class="topic-header-icon__image-div"
         ng-if="data.displayMode === 'icon'"
         ng-class="c.getIconColorClass()"
         ng-style="c.getIconBackgroundColor()">
      <img ng-src="{{data.topic.icon}}"
           ng-if="data.topic.icon"
           aria-hidden="true" />
    </div>

    <div class="topic-header-icon__text">
      <div ng-bind-html="c.widgetTitleHtml"></div>
      

    <div ng-if="c.showFavorite" ng-class="{'mesp-favorite': data.isMobileApp}" class="topic-header-favorite-container">
      <sp-widget widget="data.favoriteWidget"></sp-widget>
    </div>
  </div>


  <div ng-class="c.getTopicHeaderWithBannerClass()"
       ng-if="data.displayMode === 'banner'">
    <div class="topic-header-banner__image"
         role="img"
         aria-label="{{::(data.topic.banner_alt_text || data.topic.name)}}"
         ng-attr-aria-labelledby="{{::('topic-banner-label-' + data.topic.id)}}"
         ng-attr-title="{{::(data.topic.banner_alt_text || data.topic.name)}}"
         ng-class="c.getBannerColorClass()"
         ng-style="c.getBannerStyle()">
      <div class="topic-header-banner__gradient"
           ng-style="c.getTransparency()"/>
    </div>
    <div class="topic-header-banner__text col-xs-11 col-sm-6 col-md-4">
      <div ng-bind-html="c.widgetTitleHtml"></div>
      <div class="topic-header-description"
           style="white-space:nowrap;
           display:block; overflow: hidden;
           text-overflow: ellipsis;"
           ng-if="::(options.include_description == 'true')">{{::data.topic.desc}}</div>
    </div>
    
    <div ng-class="{'mesp-favorite': data.isMobileApp}" class="topic-header-banner-favorite-container">
      <sp-widget widget="data.favoriteWidget"></sp-widget>
    </div>
  </div>

</div>

CSS

$sp-space--xl: 24px !default;
$sp-space--lg: 16px !default;
$sp-space--md: 12px !default;
$sp-space--xxl: 32px !default;
$sp-space--sm: 8px !default;

$font-size-base: 16px !default;
$headings-font-weight: 600 !default;

$brand-primary:#4f52bd !default;
$brand-primary-darker: #333579 !default;
$brand-primary-lightest: #D1D2EE !default;

$background-primary: #ffffff !default;
$background-secondary: #f6f6f8 !default;
$background-tertiary: #F0F1F5 !default;

$color-darkest: #07080B !default;
$color-lightest: #FFFFFF !default;

$banner-height-mobile: 200px;
$banner-height-desktop: 300px;
.background-primary {
  background-color: $background-primary;
}

.background-secondary {
  background-color: $background-secondary;
}

.background-tertiary {
  background-color: $background-tertiary;
}

.brand-primary {
  background-color: $brand-primary;
}

.brand-primary-darker {
  background-color: $brand-primary-darker;
}

.brand-primary-lightest {
  background-color: $brand-primary-lightest;
}

.topic-header-icon__image-div {
  min-width: 90px;
  height: 90px;
  margin-right: $sp-space--xl;
  display: flex;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  img {
    width: 56px;
    height: 56px;
  }
}

.topic-header-icon__text {
  width: 100%;
  word-break: break-word;
  .topic-header-title {
    margin: 0;
  }
  .topic-header-description {
    padding-top: $sp-space--sm;
    font-size: $font-size-base;
    margin: 0;
  }
}

.topic-header {
  display: flex;
  align-items: center;
  margin: $sp-space--lg;
}

.topic-header-mobile {
  display: flex;
  align-items: center;
  margin: 20px $sp-space--lg;
  .topic-header-icon__image-div {
    margin-right: $sp-space--lg;
  }
  .topic-header-title {
    font-size: 28px !important;
    font-weight: $headings-font-weight;
    margin: 0;
  }
}

.mobile-border {
  border-bottom: 12px solid #F6F7F7;
}
.topic-header-banner__text {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    width: auto;
    box-sizing: border-box;
    padding: 14px 20px;
    background-color: #ffffff;
    color: #222222;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    word-break: break-word;
    z-index: 10;
 
    .topic-header-title {
        margin: 0;
        color: #222222 !important;
        text-shadow: none !important;
        opacity: 1;
    }
 
    .topic-header-description {
        padding-top: $sp-space--sm;
        font-size: $font-size-base;
        margin: 0;
        color: #222222 !important;
    }
}
 
.topic-header-banner__text {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
 
    width: calc(100% - 40px);
    max-width: none;
    display: block;
    box-sizing: border-box;
 
    padding: 14px 20px;
    background-color: #ffffff;
    color: #222222;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    word-break: break-word;
    z-index: 10;
 
    .topic-header-title {
        margin: 0;
        color: #222222 !important;
        text-shadow: none !important;
        opacity: 1;
    }
}

can any one please help me with requorment please

[dgarad]

Hi @nameisnani 

Add or replace your existing .topic-header-banner__text with

.topic-header-with-banner {
    position: relative;
}

.topic-header-banner__text {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;

    background: #fff;
    padding: 15px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);

    color: #222;
    z-index: 10;
    width: auto;
}

.topic-header-banner__text .topic-header-title {
    color: #222 !important;
    font-weight: 600;
    text-shadow: none !important;
    margin: 0;
}

.topic-header-banner__text .topic-header-description {
    color: #555 !important;
}