Ionic 3 Prevent backround image from scrolling

Ionic Framework ionic-v3
1

I have a page with a background image and a text. The background image has 100% height and a fixed position. The text is longer than the screen so it needs scrolling. I want to remove the bounce effect from the background image.
I tried everything (“no-bounce” in ion-content, css background-size and attachment etc, but I can’t get it to work… Any idea on this?

.image {
/* Set rules to fill background */
max-height: 100%;

/* Set up proportionate scaling */
height: 100%;
width: auto;
display: block;
object-fit: cover;

/* Set up positioning */
position: fixed;


background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

background-attachment: fixed;

/* Align horizontally */
left:0;
right:0;

top:0;

opacity: 0.8;
/*filter: blur(1px);*/
 }

 <ion-content no-bounce>
  <div class="image" [ngStyle]="{'background-image': 'url(' + (image | async)  + ')'}"></div>
  <div class="long-text">Long scrollable content</div>
</ion-content>
2

I solved it by using 2 ion-contents in the page, one for the background-image and one for the content of the page. Ionic needs a solution on that!!

4

I was trying something similar, but i didn’t get it, how did you do?