Content overshoots background image


#1

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-grid>
    <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-col>  
 </ion-row>
 </ion-item>
  </ion-grid>
   <br/>
   <button ion-button (click)="onbuttonclick()">
                Edit
     </button>

      </ion-content>

I am attaching the app screenshot.

Can you please help me to figure out this problem?


#2

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:

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


#3

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


#4

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


#5

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


#6

You can try to put the grid into a scroll.