I have same problem as the other

[Ana Rewis]

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.

[Illya Stepanov]

Hi Ana -

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

[Ana Rewis]

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.

[Evgene Karachevtsev]

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

[Ana Rewis]

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.

[Evgene Karachevtsev]

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

[Ana Rewis]

Hello Evgene,

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

[Evgene Karachevtsev]

Ana,

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

[Ana Rewis]

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

.btnFav{

Code: Select all

 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.

[Ana Rewis]

I can share my screen if you want.