Ionic 3 - как установить фиксированное фоновое изображение с прокруткой контента?

Question

Я работаю над приложением Ionic Chat. Я хочу установить фиксированное фоновое изображение для окна чата с прокруткой содержимого чата. Пожалуйста, помогите с CSS.

при отправке любого текста фоновое изображение скрывается.

вот мой HTML-код

<ion-content scrollDownOnLoad="true" id="chat-window" class="background" no-padding>

    <ion-list>
        <ion-item text-wrap class="message" *ngFor="let chat of chats" no-lines>
        <div [class]="chat.sent_by == loggedInUserKey ? 'messageRight' : 'messageLeft'">
        <p class="text">{{chat.message}}</p>
        <p [class]="chat.sent_by == loggedInUserKey ? 'datetimeRight' : 'datetimeLeft'">
          <span *ngIf='chat.display_date'>{{chat.date}}</span>
          <span>{{chat.time}}</span>
          <span *ngIf='chat.seen' [class]="chat.sent_by == loggedInUserKey ? 'displayseen' : 'hideseen'">seen</span>
        </p>
        </div>
      </ion-item>
  </ion-list>

  </ion-content>

вот мой код CSS

.background{
    background-image: url('../assets/bg/chatbg1.jpg');
    background-size: cover;
    background-attachment: scroll;
 }

 .messageLeft{
     float: left;
     display: inline;
     padding: 4px 5px;
     background-color: rgba(160, 158, 158, 0.562);
     margin: 5px;
     color: black;
     border-radius: 3px;
     word-break: break-all;
     //width: 250px;
 }

 .messageRight{
      float: right;
      display: inline;
      padding: 4px 5px;
      background-color: rgba(57, 113, 218, 0.795);
      margin: 5px;
      color: black;
      border-radius: 3px;
      word-break: break-all;
      //width: 250px;
 }

Answer 1

На самом деле ионный элемент принимает цвет фона белым, поэтому фоновое изображение скрывается, а фоновый стиль ионного элемента становится прозрачным

<ion-item style="background-color:transparent" text-wrap class="message" *ngFor="let chat of chats" no-lines >

Answer 2

попробуйте

.background{
   background-image: url('../assets/bg/chatbg1.jpg');
   background-size: cover;
   background-attachment: fixed; /*-- here should be fixed --*/
}
.messageLeft{
    float: left;
    display: inline;
    padding: 4px 5px;
    background-color: transparent;/*-- make background transparent--*/
    margin: 5px;
    color: black;
    border-radius: 3px;
    word-break: break-all;
   //width: 250px;
  }
 .messageRight{
    float: right;
    display: inline;
    padding: 4px 5px;
    background-color: transparent; /*-- make background transparent--*/
    margin: 5px;
    color: black;
    border-radius: 3px;
    word-break: break-all;
     //width: 250px;

}