Блог

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

Здесь HTML-код:

 <ion-content>
  <ion-grid>
    <div id="match_details">
       <ion-row class="match_time">
         <ion-col text-center>
           {{ match.datetime | date: 'dd/MM/yyyy' }}
         </ion-col>
       </ion-row>
      <ion-row class="match_time">
        <ion-col text-center *ngIf="match.status; else notStarted">
          {{ match.status }}
        </ion-col>
        <ng-template #notStarted>
          <ion-col text-center>
            {{ match.time }}
          </ion-col>
        </ng-template>
      </ion-row>
      <ion-row>
        <ion-col id="championship" text-center>
          {{ match.championship }}
        </ion-col>
      </ion-row>
      <ion-row *ngIf="match.result != null">
          <ion-col col-5 text-center class="match">
          {{ match.home_team }}
            <div *ngFor="let goal of match.home_team_goals" class="striker">
            <ion-icon name="football"></ion-icon><i> {{ goal }}</i>
          </div>
        </ion-col>
        <ion-col col-2 text-center class="result">
          {{ match.result }}
        </ion-col>
        <ion-col col-5 text-center class="match">
          {{ match.away_team }}
          <div *ngFor="let goal of match.away_team_goals" class="striker">
            <ion-icon name="football"></ion-icon><i> {{ goal }}</i>
          </div>
        </ion-col>
      </ion-row>
      <ion-row *ngIf="match.result == null" align-items-center>
        <ion-col col-5 text-center class="match">
          {{ match.home_team }}
        </ion-col>
        <ion-col col-2 text-center>
          -
        </ion-col>
        <ion-col col-5 text-center class="match">
          {{ match.away_team }}
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col text-center *ngIf="match.stadium" class="stadium">
          {{ match.stadium }}
        </ion-col>
        <ion-col text-center *ngIf="match.broadcast_type == 'Rediffusion'" class="stadium">
          Rediffusion
        </ion-col>
      </ion-row>
    </div>
    <h3 *ngIf="match.channels_all != null" class="all_channels" text-center>Tous les diffuseurs</h3>
    <ion-row>
      <ion-col text-center *ngIf="(match.channels_all | json) != '{}'; else noChannel">

        <ion-grid>
          <ion-row *ngFor="let country of match.channels_all | mapToIterable" align-items-center class="row_channel">
            <ion-col col-6>
              {{ country.name }}
            </ion-col>
            <ion-col col-6>
              <div *ngFor="let channel of country.channels">
                {{channel}}
              </div>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-col>
      <ng-template #noChannel>
        <ion-col text-center *ngIf="match.channels_all != null" >
          <ion-col col-6>
            France
          </ion-col>
          <ion-col col-6>
            {{ match.channels }}
          </ion-col>
        </ion-col>
        <ion-col text-center *ngIf="match.channels_all == null" >

        </ion-col>
      </ng-template>
    </ion-row>
  </ion-grid>
</ion-content>
  

И код css для моего идентификатора match_details Я хочу добавить фоновое изображение (которое не работает):

   #match_details {
    --background: url("../../../assets/imgs/stade5.png") no-repeat center/cover fixed;
  }
  

Здесь указан относительный путь к моему изображению :

 src/assets/imgs/stade5.png
  

Примечание: мне удалось отобразить мое изображение, когда я использую тег ion-content в css (но я не хочу, чтобы весь фон с изображением):

  ion-content {
    --background: url("../../../assets/imgs/stade5.png") no-repeat center/cover fixed;
  }
  

У кого-нибудь есть идея, как это сделать?

Спасибо.

Вам просто нужно написать правильное имя свойства css для фонового изображения.

 #match_details{
  background-image:url("../../../assets/imgs/stade5.png");
}