Page 1 of 2

Button with background image

Posted: Wed Jun 24, 2015 9:29 am
by LS

I want to put a background image on a button.
Button id is: home_btn, and I am using css class for that:
.home{
width: 20px;
height: 20px;
}
I have uploaded the image inside SOURCE at :

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

I don't know how to get the path of the file in code so that I can in the CSS class.

Please help!


Button with background image

Posted: Wed Jun 24, 2015 9:40 am
by Alena Prykhodko

Hello,

Please try this code:
code
background-image: url("../resources/image/icon1.png");/code


Button with background image

Posted: Wed Jun 24, 2015 9:50 am
by LS

Its still not working, I changed the css class to :

.home{
background-image: url("../resources/image/icon1.png") !important;
width: 20px;
height: 20px;

Code: Select all

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

}

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

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


Button with background image

Posted: Wed Jun 24, 2015 11:11 am
by LS

Its still not working, I changed the css class to :

.home{
background-image: url("../resources/image/icon1.png") !important;
width: 20px;
height: 20px;

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

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

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


Button with background image

Posted: Wed Jun 24, 2015 6:53 pm
by Evgene Karachevtsev

Hello LS,

Could you please clarify does any line of this rule work?


Button with background image

Posted: Thu Jun 25, 2015 9:09 am
by LS

Hi I am new to appery.io, I didn't get what you are asking.


Button with background image

Posted: Fri Jun 26, 2015 4:29 am
by Yurii Orishchuk

Hello,

Please try following solution:

1 Activate your button.

2 Set for this button component in properties class "".

3 Add new CSS asset.

4 Populate it with following CSS code:

pre

/*Where mobilecollapsblockheader_70 is your button name */
html head + body [name=mobilecollapsblockheader_70].ui-btn {
background: url(http://appery.io/app/view/bc4659c2-430f-4b79-a28a-d2774f5a3205/files/views/assets/image/tigr.jpg);
background-size: cover;
}

/pre

Then when you get it to work you can change URL to your goal image.

Regards.


Button with background image

Posted: Tue Jun 30, 2015 5:11 am
by LS

Its still not working


Button with background image

Posted: Tue Jun 30, 2015 6:38 pm
by Evgene Karachevtsev

Hello LS,

Please specify do you get any errors or warning in a browser console? Also please check what code is displayed in condole then this element is chosen?


Button with background image

Posted: Thu Jul 02, 2015 7:23 am
by LS

No errors. I don't know why it is not working