Content overshoots background image

In my app i am using a background image for a page and it is working fine. The code i am using is:

ion-content {
background-image: url(…/assets/img/awesome.png);
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;

But when the number of rows get increased then the content overshoots the background image and it looks quite bad.

      <ion-content padding>

    <ion-row text-center>

  <ion-col col-3> <b>Project</b> </ion-col>
 <ion-col col-4> <b>Login ID</b> </ion-col>
 <ion-col col-3> <b>Password</b> </ion-col>
 <ion-col col-2 *ngIf="buttonclicked"><b>Edit</b></ion-col>
<ion-col col-3> {{item.projectname}} </ion-col>
<ion-col col-4> {{item.loginid}} </ion-col>
<ion-col col-3> {{item.password}} </ion-col>
<ion-col col-2>
   <button ion-button color="whitish" menuToggle strong *ngIf="buttonclicked"                
    (click)="editdata(item)"><ion-icon name="menu"></ion-icon>
   <button ion-button (click)="onbuttonclick()">


I am attaching the app screenshot.

Can you please help me to figure out this problem?

You need a different approach. Considering your background is of nothing in particular I’d suggest using a repeatable tile.

Other than that I’d suggest not using one at all coz it screams frontpage ‘98

:rofl: - don’t use any from this site, they look terrible. But you get the idea

I can understand your logic :wink: but not using any background image will make it look very bland. Please suggest a way.

As I said before, use a tile image one that can be repeated.

1 Like

Please mark as solution or like any posts that have been useful

You can try to put the grid into a scroll.