How to decrease or increase the width of image (icon) from css for a text box

Question

I am using image as a icon not font awesome. I am trying to reduce the size of image using css.

Here is my code:

.sign_up_name {
  background: url(../images/name.png) no-repeat scroll 11px 13px #f2f2f2 !important;
}

<input type="text" class="form_control_field form-control-sign sign_up_name" placeholder="Name">

When I tried to add width to the class name it's reducing the whole input box not the image.

Please let me know what I am doing wrong here.

Answer 1

You need to set a size for the background, not for the whole element.

Be aware that using the compound property background lots of things get set to a default, including size. It is probably clearer to set out each of the settings you are interested in separately so you could replace the background property setting with:

background-size: 20px; /* this will set the width and the height will be auto. There are other settings too which may be useful, contain and cover. Depends on what you want. Setting auto 100% would set the height for example */

background-image: url(your url);

background-position: x y; /* if you want to position it differently from the default */

background-repeat: no-repeat no-repeat; /* the default is to repeat it. You can set the repeat for each direction separately */

Answer 2

The format of the background property looks like:

background-image || background-position [ / background-size ]? || background-repeat || background-attachment || background-origin || background-clip || background-color

To control the result we have to set both background-position and background-size and to use a slash between them. For example:

.sign_up_name {
  background: url(https://i.stack.imgur.com/KYmPL.png) 3px center / 11px 13px no-repeat #f2f2f2;

  padding-left: 18px;  /* prevent text from overlapping the background image */
}

<input type="text" class="form_control_field form-control-sign sign_up_name" placeholder="Name">