LS
Posts: 0
Joined: Tue Jun 23, 2015 8:08 am

Button with background image

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!

Alena Prykhodko
Posts: 0
Joined: Tue Apr 09, 2013 7:36 am

Button with background image

Hello,

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

LS
Posts: 0
Joined: Tue Jun 23, 2015 8:08 am

Button with background image

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.

LS
Posts: 0
Joined: Tue Jun 23, 2015 8:08 am

Button with background image

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.

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Button with background image

Hello LS,

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

LS
Posts: 0
Joined: Tue Jun 23, 2015 8:08 am

Button with background image

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

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Button with background image

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.

LS
Posts: 0
Joined: Tue Jun 23, 2015 8:08 am

Button with background image

Its still not working

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Button with background image

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?

LS
Posts: 0
Joined: Tue Jun 23, 2015 8:08 am

Button with background image

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

Return to “Issues”