The last bit is overriding ionic’s default ion-content background color setting of white.
I’m not sure if you are using a Navbar/Toolbar but it’s at least a start. By looking at the Elements and Styles windows in Chrome Developer you can see the generated CSS from ionic and usually work out what you need to do.
Change CSS to background-image: url(’…/…/img/letsstart.jpg’);
You need to reference the image using a relative path (relative path from the css file after build) and you can only reference the files in the APP/www folder.
We are trying with background image for that we are using .scss but its loading only on --lab environment (browser ) … but now i want display it on android design could you help me out which path i should specify and where i need to put the resource in the device .
currently in url path url(…/…/img/bg2.jpeg) i am specifying
Having the same annoying issue. I am overriding the ion-content in the varibles.scss and everything works fine in ionic serve. When ionic run android i get a blank (default white) background. I have tried everything I could find here on the boards and other forums, yet nothing works. Attempted this with two different android devices (galaxy 3s and 4), and both produce the same negative results.
I am using other images through out the app and they work fine on the device. The path is relative to the index.html, background-image: url('assets/img/background.png'); just like all the other images that work.
The background image is not searched in /assets folder. When transpiled, it is looked into the /www/build folder. So if you have your background image on your assets, the url should be …/assets/img/letsstart.jpg. In stead of assets/img/letsstart.jpg.
Correct on the path. The solution to my particular problem was that I mistakenly put the CSS in the variables.scss file instead of app.scss. The correct code now is this, for global background image:
I am still unsure if I need the -webkit- or if I am even using it correctly, however. Any inputs on this would certainly be appreciated. From what I read I am doing this correctly for compatibility with chrome and safari web-views on the devices.
My problem was solved by moving the background property from page’s individual css file (page.scss) to app.scss. Don’t know what’s the logic behind that though.
Spot on!
Guys, I spent way to much time trying to figure this out.
There would be an elegant way, but here is the quick one.
When you need to refer to an asset through your css rule, then instead of keeping that css rule in any component’s scss or variables.scss, just keep that in the app.scss. And use relative address of the asset
For example (the one that worked) :