Input button image color

Question

How to set the color images in a snap? I can not find the property of how this can be done.

There is a button in which there is a picture.

.button {
        background: url('../image/arrow.png') 189px no-repeat; /* картинка */
        background-color: #ff5c36; /* цвет кнопке*/
        color:  #ffffff; /* цвет текста в кнопке*/
        width: 100px;
    }

<input class="button" type="button" value="Send">

I don't understand how to add image in code.

I don't understand, do you want to change the color of the arrow? — utnaf, Feb 24 '17 at 11:11
Take a look [here](http://stackoverflow.com/questions/8683528/embed-image-in-a-button-element) — utnaf, Feb 24 '17 at 11:12

Ganesh Yadav · Answer 1 · 2017-02-24T11:52:22.190

You have defined 189px which is taking backgound-position.

The css rule for background

background: background-color background-image background-repeat background-attachment background-position;

There is not inline property for background-size. Because background-size was introduced late in css3.

So you can define with background-position / background-size.

background: background-color background-image background-repeat background-attachment background-position/background-size;

Or it's better to use: background-size below after background property.

background: background-color background-image background-repeat background-attachment background-position;
background-size: width height; // Yes in background-size first one is width and 2nd is height

example:

background: url('image.png') no-repeat right center/14px;

or

background: url('image.png') no-repeat;
background-position: right center;
background-size:14px;

.button {
        background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-right-b-128.png') no-repeat right center/14px;
        background-color: #ff5c36; /* цвет кнопке*/
        color:  #ffffff; /* цвет текста в кнопке*/
        width: 100px;
    }

<input class="button" type="button" value="Send">

Input button image color

1 Answers1