Forum | Appery.io

Hello,

i'd like to set a background image to a button, but it doesn't work.
I tried this code:

Appery('mobilebutton_103').css('background-image','url('+Appery.getImagePath('reload_neu.png')+')');

Second question:
Is it possible to set a backgroundimage with CSS as well?

Thank you!

Hi Andre -

Please check our section here:
:: http://devcenter.appery.io/documentat...

and about background image here:
:: http://devcenter.appery.io/documentat...

Hello Illya,

i gave my button the classname "my_button" and tried:

.my_button {
background-image: url("images/reload_neu.png");
}

But it still doesn't work.

Maybe there is another way:

Iwant to create a button with a image, that changes the image when pressed - like the normal button behavoiour.
Is there another way?

Hi Andre,

Your css style weight is small for override default's theme styles
http://css-tricks.com/specifics-on-cs... - Here is explains how it works

Hi Ihor,

thank you, this was very helpful.
this works very fine:
background-image: url("http://www.my-domain.de/miapp/reload_...;

But if i use an image from the mediamanager it doesn't work!
I tried:
background-image: url("images/reload_neu_klein.png")!important;

Second question:
if i press the button it gets a blue circle around it.
How can i change the color of this circle?

Hi Andre,

First, please make sure you use correct directory, better to write full path:
Seems, should be files/views/assets/image/reload_neu_klein.png.
See screen shot http://prntscr.com/5qodck/direct

[quote:]
if i press the button it gets a blue circle around it.
How can i change the color of this circle? [/quote]

Do you mean border?
You can change its color with CSS as well, please search online for appropriate view.
See more details regarding Button component here http://devcenter.appery.io/documentat...

Hello Alena,

i used the directory, but it still doesn't work:
see here

i mean the circle that appears around the button if pressed:

Hi Andre,

Here is a CSS code for your goal:

pre

/* where mobilebutton_57 is your button name. */
.ui-btn[name="mobilebutton_57"]{
background-image: url(../../../../files/views/assets/image/phone.png)!important;
}

/pre

Regards.

Thank you!
That workes fine!

But how to change the color of the button-border when pressed(see above)?

Use border-color property.