Problems with putting avatar over image(white space)

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-card *ngFor="let leader of leaderList">

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



.avatar {
  position: absolute;


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


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



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

<ion-item no-lines><ion-avatar item-end><img src=""></ion-avatar></ion-item>
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';

  selector: 'page-home',
  template: `

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