Forum | Appery.io

Hi,
I am new to this area and am trying to create a custom background image.
I am testing using the tutorial help to create a custom background image, and even those 2 lines are giving a lot of errors. Can you help pls?
Thanks,
TK

Hello Tejwant,

You should load image in Media Manager. On component: "yourPage", Event: Load Action: Run JavaScript
please paste this script:
preApperyio("mobilecontainer1").css("background-image", 'url('+Apperyio.getImagePath("image.jpg")+')')/pre
where image.jpg is the name of your picture.

How do I make the image resize automatically based on the screen size?

Hi Mike,

Here is code that you requested:

pre

Apperyio("mobilecontainer1").css({
"background-image": "url(" + Apperyio.getImagePath("image.jpg") + ")",
"background-size": "cover"
})

/pre

Regards.

Hi after reading this I chose to do this, what I'm finding is that I see the image load but then disappears? Any idea why?

Hello! I've tried this code (the first code above) for days now in different ways, but it still doesn't work form me.

Apperyio("mobilecontainer1").css("background-image",'url('+Apperyio.getImagePath("BackMenu.jpg")+')');

Can you give me a detailed explanation of how I do this?

I have putted this code in EVENT - MY PAGE - LOAD - Run JavaScript

Hi Nicklas - Have you tried this code on the page show event?

Hi Nicklas,

You can put this in your css file

Remember to change to your mobilecontainer name, and also check the image name and path

code
[dsid="YourMobileContainerName"] {
background-image: url("../image/myImage.jpg");
background-repeat: no-repeat;
background-size: cover; /* comment this out if required */
}
/code
And remember to check if your image exists in this folder
WEB_RESOURCES - files - views - assets - image - myImage.jpg

This will work.

Cheers,
M&M

Thank you!
What is the path of the image if I have uploaded the image in "Media Manager"? is it just /image/myImage.jpg ?

Here you can find full path http://prntscr.com/6mcsbl/direct