Dynamic background

Ionic Framework ionic-v3
1

Hi, I need to set a dynamic background image to all the page,

this.image = "../assets/img/background.png" //details.ts

Right now I’m ussing only scss to set the background:

	.no-scroll .scroll-content{
		background: url("../assets/img/background.png") no-repeat center center fixed;
		overflow: hidden;
		background-size: cover;
	}

So, I need to change the page background dynamically and also set this background parameters:

no-repeat center center fixed

2

maybe just select it?

      let selection = document.getElementsByClassName('scroll-content') as HTMLCollectionOf<HTMLElement>;
      if (selection.length != 0) {
        selection[0].style.background = "url("../assets/img/background.png") no-repeat center center fixed"
      }
3

I tried your answer but, is not setting the background

4

I tried:

      let selection = document.getElementsByClassName('no-scroll') as HTMLCollectionOf<HTMLElement>;
      if (selection.length != 0) {
        selection[2].style.backgroundImage = "url('../assets/img/background.png') ";
        console.log(JSON.stringify(selection));
      }

And the background is set, but if I try to add the params like this:

selection[2].style.backgroundImage = "url('../assets/img/background.png') no-repeat center center fixed";

The image disappear

5

Using document.getElementsByClassName is a really BAD IDEA! It’s crazy leaky, as in if you have multiple pages in the stack you’ll select the ones previously as well as the current one. Don’t ever grab elements using document. anything!

I’ve cooked you up a repo with a button switcher.

6

Thanks! I figured out using [ngStyle], but the background parameters still not working

7

I think my repo clearly illustrates how to get it done dynamically… not using ngStyle