Problems with putting avatar over image(white space)

Ionic Framework ionic-v3
1

46
Bildschirmfoto 2018-02-13 um 19.06.46.png644×750 266 KB

The problem is that there is a white space appearing between the avatar image and the background image. And I cannot remove it. I want the avatar to be over the background image. So how do I rewove this white space?

<ion-content class="card-background-page">




  <ion-list>
  <ion-card *ngFor="let leader of leaderList">

     <ion-item>
       <ion-avatar item-end>
         <img class="avatar" src="img/one.jpeg">
       </ion-avatar>
     </ion-item>
     <img class="picture" src={{leader.img}}/>





  </ion-card>
  </ion-list>


</ion-content>

page-pics{




.avatar {
  position: absolute;

}

  .card {
    margin: 0px;
    width: calc(100%);



  }

  ion-card {
    position: relative;
    text-align: left;
    height: 125px;





  }

}
2

That background comes from ion-item. It has a white background by default. You can try the following.

template:
<ion-item no-lines><ion-avatar item-end><img src="https://loremflickr.com/100/100"></ion-avatar></ion-item>
css:
ion-item {background: transparent;}

Here is an example:

And how it looks on ios:

and its code:

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

@Component({
  selector: 'page-home',
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>Home</ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content padding style="background-color: lightblue;">
      <ion-item no-lines class="transparent">Transparent ion-item<ion-avatar item-end><img src="https://loremflickr.com/100/100"></ion-avatar></ion-item>
      <p>...space between...</p>
      <ion-item>Default ion-item<ion-avatar item-end><img src="https://loremflickr.com/100/100"></ion-avatar></ion-item>
    </ion-content>
  `,
  styles: ['ion-item.transparent {background: transparent;}']
})
export class HomePage {
  constructor(public navCtrl: NavController) { }
}