Slider image is not set properly in ionic app

[hajkhan]

i want to cover the header by this image of the slider but the image is not set properly how to set image that cover header too

 page-carousel-with-login-reg {
  
    ion-slides {
        background-color: whitesmoke;
        text-align: center;  
    }
    ion-slide h2, ion-slide p {
        text-align: center;
        margin: 0;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
        padding-top: 2rem;
        padding-bottom: 1rem;
        text-shadow: rgba(0, 7, 1, 0.1);
        font-family: Georgia, 'Times New Roman', Times, serif
        // font-family: 'Trebuchet MS', sans-serif
    }
    ion-slide h2 {
        font-size: 2rem;
        font-weight: bold;

    }
    ion-slide p {
        font-size: 1.5rem
    }
    ion-slide img{
        
        margin-top: 0 !important;
       
        width: 100%;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
       
    }
   
}

[robinyo]

Can you post the page template?

For example:

<ion-header no-border>

  <ion-navbar transparent>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-navbar>

</ion-header>

<ion-content no-bounce padding>

  <ion-slides (ionSlideDidChange)="slideChanged()">

    <!-- Slide 1 -->

    <ion-slide>

      <ion-row>
        <ion-col text-center>
          <ion-icon name="ionic" style="zoom: 3.0;"></ion-icon>
          <h1>Welcome to the <strong>Big Top</strong></h1>
        </ion-col>
      </ion-row>

      <ion-row style="height: 60%">
        <ion-col text-center>
          <button ion-button color="light" clear style="font-size: 22px;" (click)="nextPage()">
            Sign in
          </button>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col text-center>
          <button ion-button color="light" clear>
            Register
          </button>
        </ion-col>
      </ion-row>

    </ion-slide>

    <!-- Slide 2 -->

    <ion-slide>

      <p>
        Find popular venues, unique local experiences and events just for you.
      </p>

    </ion-slide>

    <!-- Slide 3 -->

    <ion-slide>

      <p>
        See where your friends are going so you never miss out on the fun.
      </p>

    </ion-slide>

  </ion-slides>

</ion-content>

See: https://robferguson.org/blog/2017/11/12/theming-your-ionic-3-app/

[hajkhan]

this my ts code

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-carousel-with-login-reg',
  templateUrl: 'carousel-with-login-reg.html',
})
export class CarouselWithLoginRegPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad CarouselWithLoginRegPage');
  }
  navToLogin(){
    this.navCtrl.push("LoginPage")
  }

slider = [{
    title:"Taking the hassel out of laundry. Simple",
    desc:"We collect, wash & deliver your items back to you",
    img:"assets/imgs/parker-burchfield-224850.jpg"
  },
  {
    title:"1). Book with the WashEz app",
    desc:"Select a convinent collection time",
    img:"../assets/imgs/hannah-morgan-39891.jpg"
  },
  {
    title:"2). Meet WashEz driver",
    desc:"collect from your home or office",
    img:"../assets/imgs/jason-briscoe-105340.jpg"
  },
    {
      title:"3). Get your clean laundry",
      desc:"get your stuff at sutible time that suit you",
      img:"../assets/imgs/nik-macmillan-153579.jpg"}
];

}

this my code html page

<ion-content> 
   
<ion-slides pager="true">
    <ion-slide *ngFor="let slide of slider">
      <img style="border:0;margin:0;" [src]="slide.img" alt="">
      <h2 [innerHTML]="slide.title"></h2>
      <p [innerHTML]="slide.desc"></p>
    </ion-slide>
  </ion-slides>
</ion-content>
  <ion-footer >
   <ion-grid no-padding >
    <ion-row>
      <ion-col col-6>
          <button style="border:0;margin:0;" ion-button color="light" full (click)=navToLogin() >Login</button>
      </ion-col>
      <ion-col col-6>
        <button style="border:0;margin:0;" ion-button color="secondary" full>Register</button>
      </ion-col>
    </ion-row>
   </ion-grid>
    </ion-footer>