Menu
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
637
If you only need to attach your image to a specific page, just go to that page's . scss file and define the –background variable. Here, I will set the image to reference a bg. jpg file I have in my assets directory, as well as set the parameters of how it should be rendered.
A color can be applied to an Ionic component in order to change the default colors using the color attribute. Notice in the buttons below that the text and background changes based on the color set. When there is no color set on the button it uses the primary color by default.
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
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
