Background image / CSS

[Rod b]

I have the background image working using javascript. I have it working in two ways:

1. Using a direct link to an external location:

   Appery('mobilecontainer').css('background-image','url("http://myplace.com.au/images/mypic.jpg")');

2. Using the Media Manager like this:

   Appery('mobilecontainer').css('background-image','url("' + Appery.getImagePath('mypic.jpg') + '")');

   My question is:

   I want to set the url to the picture dynamically based on a storage variable I have on the page i.e called PicName - can I do that?

[Serhii Kulibaba]

Hello Rod,

You should replace:

Appery.getImagePath('mypic.jpg')

with:
Apperyio.getImagePath(Apperyio.storage.PicName.get())

[Rod b]

Thanks Sergiy. One follow-up question:

If I'm setting the background image with a JS page load event (like in the 2. above) and I have the image stored in Apeery media manager. Is the app fetching the image from a remote location every time the page is loaded?

If so, I guess this is quite data intensive and will slow my app down. Is there a way to store the image on the device initially and access it there?

[Evgene Karachevtsev]

Hello Rob,

You may upload your images to the Source tab and specify the way to them like code../image/name.jpg/code. This will speed up your app.

[Rod b]

Thanks Evgene.

I have upload my pic, called name.jpg, and tried:

Appery('mobilecontainer').css('background-image','url("../image/name.jpg")');

It isn't showing in Test, have I defined the URL incorrectly?

[Illya Stepanov]

Hi Rob -

Try this way:
precodeurl(../../../../files/resources/image/no-image.jpg)/code/pre