I can't fill slides background

I do not speak English, so I’m translating it.
I wish you refer to that.
I have created a slide page, and the picture is a part of the slide page.
I would like to paint the red circle with the same color as the sign. But I do not know how to get to the area.
image

my code

<ion-slides pager>
  <ion-slide>
    <ion-grid class="back2">
    <ion-row class="texta">
      Sign up
    </ion-row>
</ion-grid>
<ion-item >
    <ion-label><ion-img class="icon" src="img/id.png"></ion-img></ion-label>
    <ion-input type="text" value="" placeholder="ID"></ion-input>
</ion-item>
<ion-item>
    <ion-label><ion-img class="icon" src="img/pw.png"></ion-img></ion-label>
    <ion-input type="password" value="" placeholder="Password"></ion-input>
</ion-item>
<ion-item>
<ion-label><ion-img class="icon" src="img/pw.png"></ion-img></ion-label>
<ion-input type="password" value="" placeholder="Confirm Password"></ion-input>
</ion-item>
<button ion-button round class="next">NEXT</button>
  </ion-slide>
</ion-slides>

scss
.back2 {
width: 100%;
height: 100px;
background-color: #02a0e3;
}
.texta {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
font-size: 30px;
color: #fff;
}