Image does not show up when ionic emulate ios - background: url("/assets/images/ocean7.png")

Ionic Framework ionic-v3
1

Hello,

This css does not work when trying to run ionic emulate ios:

background: url("/assets/images/ocean7.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;

but it does work in Chrome with ionic serve

Any ideas?

2

I had the same issue, I used the style below and it worked fine

background: url(“…/assets/images/pic.png”)

3

To elaborate, the reason for this is because the CSS files sit inside of the build folder, and the assets folder is one level up from that, so paths will be ../assets/whatever. In templates, you don’t need to use ../ to go up a directory because the index.html file is on the same level as the assets folder so you can just use assets/whatever.

2 Likes
4

Hey Josh! Thanks. I tried that because I follow your book updates. Clearly it works in your quicklists example but it was in the html. Not that it should make a difference since the scss file sits in the same level.

I actually get a black background. I would think it would be white if it didn’t load.

tried …/assets/whatever and it worked