Ionic v4 Change - Cannot set background-image of ion-content or ion-scroll

[dmastag]

Bug Report

Ionic Info

 λ ionic info
cli packages: (C:\Users\julian\AppData\Roaming\npm\node_modules)

   @ionic/cli-utils  : 2.0.0-rc.6
   ionic (Ionic CLI) : 4.0.0-rc.6

global packages:

   cordova (Cordova CLI) : 8.0.0

local packages:

   @angular-devkit/core       : 0.6.0
   @angular-devkit/schematics : 0.6.0
   @angular/cli               : 6.0.1
   @ionic/schematics-angular  : 1.0.0-rc.6
   Cordova Platforms          : none
   Ionic Framework            : @ionic/angular 4.0.0-alpha.7

System:

   NodeJS : v10.2.1
   npm    : 6.1.0
   OS     : Windows 10

Environment Variables:

   ANDROID_HOME : not set

Describe the Bug
I cannot use background-image to set the background of the ion-content or ion-scroll.

Steps to Reproduce
Steps to reproduce the behavior:

1. Create new blank App
2. use scss of the home page (home.page.scss) and add background-image code

Related Code
At home.page.scss, none of the following is working

ion-content {
    background-image: url('https://lorempixel.com/400/200/sports/Dummy-Text/');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

ion-scroll {
    background-image: url('https://lorempixel.com/400/200/sports/Dummy-Text/');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

ion-content ion-scroll {
    background-image: url('https://lorempixel.com/400/200/sports/Dummy-Text/');
}

But if I add the following at global.scss it will work

app-page-home {
    ion-content ion-scroll {
        background-image: url('https://lorempixel.com/400/200/sports/Dummy-Text/');
    }
}

Expected Behavior
I expect to be able to change the background image from the page's scss file

Additional Context

[UncertaintyP]

Pinned it down to the following problem:

The generated ion-scroll element does not get the _ngcontent-c0 attribute but the generated css has it (ion-scroll[_ngcontent-c0]) as part of angulars emulated view encapsulation.
This applies to other components as well, e.g. the button element within an ion-button.

A workaround is described here https://stackoverflow.com/questions/36265026/angular-2-innerhtml-styling thus you can use ion-content ::ng-deep ion-scroll to target the ion-scroll element without setting encapsulation on the component to ViewEncapsulation.None

[dmastag]

Thanks, its working as expected.

If the Ionic Team could confirm if this workaround is something that should always be used then I will close this issue.

[dayaki]

Thanks, I was facing same product

[MT--]

I would be wary of anything with ::ng-deep and other shadow-piercing descendant combinators, as they are all deprecated:

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

If the Ionic Team could confirm if this workaround is something that should always be used then I will close this issue.

I would imagine that the Ionic Team will not build on deprecated features of any of the frameworks that will be supported in the 4.0.0 release, and thus, I would not include them in any application using v4, @dmastag + @UncertaintyP...

[dmastag]

Thanks @MT--

Josh Morony is suggesting to use ViewEncapsulation.NONE on all components which can work wihout ::ng-deep on a discussion on his Blog

Ref: https://www.joshmorony.com/my-method-for-upgrading-from-ionic-3-to-ionic-4/

[brandyscarney]

Thanks for the issue! We do currently recommend setting ViewEncapsulation to None on your pages unless you have a need for Angular's ViewEncapsulation. We believe this is the easiest way to migrate from v3 -> v4 without having to make changes to your existing styles, but we aren't trying to discourage anyone from using it if they want to.

If you do want to use Angular's default Emulated, you will need to target the elements by wrapping them in the :host element. For example, if I comment out the line that sets ViewEncapsulation to None on a page in the conference app (this line):

@Component({
  selector: 'page-tutorial',
  templateUrl: 'tutorial.html',
  styleUrls: ['./tutorial.scss'],
- encapsulation: ViewEncapsulation.None
})

It will result in the following (broken) look:

However, if I change the CSS to target :host instead of page-tutorial on this line:

- page-tutorial {
+ :host {
    ion-toolbar {

Everything looks good again:

For the original issue, you should be able to do the following using latest:

:host {
  ion-content {
    --background: url('https://lorempixel.com/400/200/sports/Dummy-Text/') no-repeat 100% 100%;
  }
}

If you are trying to do a fullscreen background and notice that the image isn't going up behind the header, there's an issue for that here: #15635

I hope that clears it up, but please let me know if you have questions! Thanks!

[brandyscarney]

I am going to close this since my above comment should resolve all outstanding issues here, and I have recently pushed a fix for #15635 which will be included in the 4.0.0-beta.12 release. If you are still seeing issues, please create a new issue. Thank you!

[wterrill]

in your post above... the line:

:host {
  ion-content {
    --background: url('https://lorempixel.com/400/200/sports/Dummy-Text/') no-repeat 100% 100%;
  }
}

doesn't seem to change the size of the image when 100% is changed for either width or heighth. (however no-repeat and repeat are working correctly.)

Is this coming out in a future fix?

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.