Forum | Appery.io

I'm putting an image to a button in Appery, but encountered a problem not to find out a path of the image file. I searched the problem and found out just same topic solved by the other on this Get Satisfaction. This is the link.

https://getsatisfaction.com/apperyio/...

I would appreciate if someone lets me know how he solved the problem.

Hi Ana -

Could you please be more specific? What exact problem do you have?

Hi lllya,

Thank you for the response.
I have an exact same problem and case with him.

I am using appery.io website's development environment.
I want to put a background image on a circular button.
Button name is: btnFav, and I am using css class for that:
.btnFav{
width: 20px;
height: 20px;

-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
}

The last three line I have added is to get a circular shape button.

I added the css class to btnFav properties-Class Name.

I have uploaded the image inside SOURCE at :

WEB_RESOURCES-files-resources-image-icon1.png,

I have tried by putting:

background-image: url("../resources/image/icon1.png") !important;

background-image: url("../files/views/assets/image/icon1.png")!important;

background: url("../files/views/assets/image/icon1.png")!important;

url("..\files\views\assets\image\icon1.png")

url("files/views/assets/image/icon1.png")

url("files\views\assets\image\icon1.png")

I don't know how to get the path of the file in code so that I can use it in the CSS class using the appery.io development website itself.

Of course, I have also tried to use your JS url method and worked fine, but I need to do it in the CSS class.

Thank you and please help me.

Hello Ana,

Please try this code for the for the background image uploaded in the folder: "files-resources-image"
pre.aaaaaa{
background-image: url(../../../../files/resources/image/no-image.jpg) !important;
/pre

Hello Evgene,

Thank you for the message.
I have copied and paste it to my code, unfortunately it still doesn't display any image even after save and refresh all.
A yellow exclamation point(!) was occurred when pasted it to CSS class, which says "Use of !important", and I still test it, but the image was not displayed.
I removed "!important" at the end of the paste and tested it again, but still same.

Thanks for you help and help me again.

Ana,

Please specify have you added class name (in this case .aaaaaa) to the container on desired page ? You may also change this code to
pre[dsid="mobilecontainer"]
background-image: url(../../../../files/resources/image/no-image.jpg) !important;/pre

Hello Evgene,

I don't mean to put image on background of container, I need to do it on a button.

Ana,

This approach works for button too, just add class name to the button and try.

This is my code tried to do it as you said.

.btnFav{

 width: 20px;  
 height: 20px;  

 background-image: url(../../../../files/resources/image/no-image.jpg); 

}

I added the class name to button so it changed the button size 20 * 20 px correctly, but still doesn't display the image.

I can share my screen if you want.