CSS body background-image not showing

Don’t you just hate it when you’re writing what’s supposed to be the simplest no brainer code ever and it just refuses to work!?

I just started a blank starter project (ionic start blablaApp blank) and the very first thing I tried to do was to put a background image in the CSS like this

body {
background: url("../img/lola_akinmade_akerstrom-white_reindeer-1605.jpg");
}

It doesn’t work!
If I change it into a div and put a small div in index.html then the img shows up correctly as the background for that div - but it doesn’t show up as the body backgorund. Why not?
going crazy

probably you have a pathing issue, the path must be relative to your index.html, so it would make most sense if the path should be img/imagename.jpg instead of …/img/imagename.jpg

Assuming you are using the “default” setup like:

www
    /img
        imagename.jpg
    /js
    /css
    index.html

I’m not able to test it right now. I did write it relative to the css. It worked for the default ionic.png though and I placed my img in the same img folder so that one should work too(!). I’ll try again tonight.

To apply background image to the body of the ionic page, you have to style the .pane element.

Lol! Should have thought about that… Indeed, you should style your pane tommy :wink:

@tommysollen, if you apply a background image to the .pane element, then, all of your views would have that background. It’ll be a better approach to add a class to your <ion-view class="custom"> and then style the .custom.pane element with a background image.

1 Like
  • Funnily enough, the following will make Google Chrome to not display the image background, although the app in device will.

      background: url('img/lola_akinmade_akerstrom-white_reindeer-1605.jpg');
    
  • The following makes Google Chrome to display the image background, but the app in device won’t.

      background: url('/img/lola_akinmade_akerstrom-white_reindeer-1605.jpg');
    
  • Finally, in order to display on both, I have to use:

     background: url('../img/lola_akinmade_akerstrom-white_reindeer-1605.jpg');
    

I’m developing on Windows 7, Google Chrome, Crosswalk (instead of Cordova - but shouldn’t matter).

9 Likes

Thanks! This is the solution that works for me.

After some further digging, I found a thorough explanation in the accepted answer at http://stackoverflow.com/questions/25036288/does-phonegap-support-root-relative-path-what-are-the-best-practices

To summarize, when we use ionic serve, there is a local server running with its root at myApp/www. On a device, that root is understood to mean file:///. In this convention, the actual path to our myApp/www directory on an android device is file:///android_asset/www

With the root path being different on device and on your computer, it’s better to just use the relative path with respect to your css file. If the css is inline in html, then specify it with relative to index.html

1 Like

You are great “TEACHER”, i spent hours and hours until i read your help!!!
Thank you

Hi teevo! I want to get an image from the gallery on an android device and set it as the background image for a div.
From your answer, I gather that the root directory is file:///android_asset/www .

But when we pick an image from gallery using the Cordova Camera plugin, the url is
file:///storage/emulated/0/Android/data/com.ionicframework.project/cache/IMG_20160921_122709.jpg?1474441029929.
How do I set this image as the background image of a div?

Thanks for the solution. Works perfectly!

I stumbled upon this old thread while trying to solve the same/similar challenge with images not rendering on the device but, oddly, would render when running with a live server or with the Chrome browser.

If you’re reading this, the filespec to your image is also case-sensitive. Chrome doesn’t care, but Cordova (Phonegap) does!