Ionic V4 beta 12: can't scale background image in ion-content

Ionic Framework ionic-v3
1

I’ve been unable to scale or otherwise alter a background image when used in an ionic-4 page.

In the test.page.scss file, I put in this css4

ion-content{
    --background: url('assets/imgs/testPic.jpg')  no-repeat 50% 10%;
}

and the result is a single picture in the background. If I change “no-repeat” to “repeat”, I get the expected change, the image repeats itself on the page. However, changing the 50% or 10% value has no effect.

Additionally, I tried using :

background-repeat: no-repeat;
background-size: 100% 100%;

And I saw no changes in either scaling or repeating using either one of these values.

Has someone been able to scale the background image in ionic V4 (beta 12?)

Note: this is (kinda) referenced in this bug report:

2

Firstly, css variable “–background” must be used to change the background of ion-content. “background-repeat”, “background-size” and other css properties have no effect.

Secondly, The “background” property is a shorthand property. In order to change background size, background position must be set at the same time and placed behind background image. For example,

ion-content {
    --background: url('assets/imgs/testPic.jpg')  0 0/50% 10% no-repeat;
}

The order is important!

3 Likes
3

its work fine
its work fine

4

this code works for me.

ion-content{
    --background: url(' ../your/path/image.png')  no-repeat cover fixed center;

    background: url(' ../your/path/image.png') no-repeat fixed center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
3 Likes