I want to do a transparent background

I want to create a transparent background how can i do that.

<ion-content fullscreen class="card-background-page">
    <img src="../assets/imgs/emi-background.jpg"/>
    <div class="card-title">
          <ion-label color="primary">Interest Rate</ion-label>
          <ion-input placeholder="Text Input" type="number" [(ngModel)]="homeloaninterest"></ion-input>
          <ion-icon item-right><i class="fa fa-percent" aria-hidden="true"></i></ion-icon>
    <div class="card-subtitle">41 Listings</div>
            <ion-col center text-center>
              <button ion-button icon-left clear small (click)="shareItem()">
              <ion-icon name="share"></ion-icon>


  .card-background-page {

  ion-card {
    position: relative;
    text-align: center;

  .card-title {
    position: absolute;
    top: 36%;
    font-size: 2.0em;
    width: 100%;
    font-weight: bold;
    color: #fff;

  .card-subtitle {
    font-size: 1.0em;
    position: absolute;
    top: 52%;
    width: 100%;
    color: #fff;



Now i want to remove the white box and transparent with my background how can i do that please help me anyone.


right click on it -> inspect element -> a thing opens where you can play with your css classes.

Use CSS proporties

background-color: transparent;
background-color: rgba(0, 0, 255, 0.5);

In CSS, there is no property such as transparancy. But, you can achieve transparancy by inserting a pseudo element with regular opacity the exact size of the element behind it. The CSS3 property for transparent is opacity and it is a part of the W3C CSS3 recommendation.

  opacity: 0.6;

The opacity-level describes the transparency-level, it ranges from 0.0 to 1.0. The level 0.0 is completely transparent, 0.5 is 50% see-through and level 1.0 is not transparent. Opacity has a default initial value of 1 (100% opaque).

I agree with @larabrian set the card background as transparent

Or it’s opacity to 0