Pull down refresh is hiding background image

Ionic Framework ionic-v3
1

image
Screen Shot 2017-07-19 at 11.38.05 AM.jpg1280×800 187 KB

The white area should be transparent.

ion-content{
    background: url(../assets/imgs/bg.jpg) no-repeat fixed;
    background-color: transparent;
    -webkit-background-size: cover;
    background-size: cover;
    font-size:24px; 
}
2

Is it transparent while not pulling down to refresh?

3

No it is not, originally thought the image was not appearing at all. Then swiped down and it appeared. I am thinking it is a transparency in the refreshing that I do not have set. Just can not find the correct styling tag.

4

Isn’t it then not more a white background in the normal list you are pulling down that is now being pulled down?

5

I have had some success, cleaning up the pages. I had to add the page reference and the corresponding style tags to the app.scss as well as add transparency to .has-refresher > .scroll - content, on the .sass for the specific page I am working with, for it to work as expected. If either of these are not in place the app defaults to white.

One would think if a setting is made on the actual page it would, over ride the app defaults settings.

There should be a better way to handle this.

6

I fixed this using the following line in the page specific scss file:

ion-content { background-color: transparent !important; }

4 Likes
7

Thanks, that saved some time !