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
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