ionic 4: changing ion-content background does not work
Solution 1
You can use the CSS-Variable --background to change the background of ion-content.
Example:
ion-content{
--background: #fff url('../../assets/images/cover.jpg') no-repeat center center / cover;
}
Put this into your components, pages or global scss.
For reference see: https://beta.ionicframework.com/docs/api/content#css-custom-properties
Solution 2
I solved the problem doing the following:
ion-content {
--background: none;
background-image: url('/assets/imgs/page_bg.jpg');
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}
This will disabled background and then set the correct one.
Solution 3
I have encountered the similar situation, having ionic background css property leads to flickering issues on IOS
try the following if you have encountered flickering issue
:host {
ion-content {
--background:none;
background:url(''../../assets/images/cover.jpg');
background-size: cover;
background-position: center center;
}
}
for anyone having keyboard issues (background resizes on keyboard show) install Keyboard plugin
and add the following code on your config.json
<preference name="keyboardResize" value="false" />
<preference name="keyboardResizeMode" value="native" />
Note: this may hide item beneath the keyboard when its shown (I have tested only on iOS)
Vik
http://www.oracle.com/innovation/innovator-vivek-kumar.html http://adfjsf.blogspot.com http://www.linkedin.com/vikceo http://www.twitter.com/vikceo
Updated on February 15, 2022Comments
-
Vik over 2 years
i have tried in global.scss as
ion-content{ background-image: url('assets/images/cover.jpg'); -webkit-background-image: url('assets/images/cover.jpg'); background-repeat: no-repeat; background-size:cover; }
but this does not render the image. tried path as ./assets/images/cover.jpg as well.
if i put the same image as img tag on the page that shows up ruling out invalid image possibility.
I also tried to put in the homeage.scss as
.myview { background-image: url('../../assets/images/cover.jpg'); background-repeat: no-repeat; background-size:cover; }
and using class="myview" in home.html no luck