Karolina Ticha Karolina Ticha - 4 months ago 13
CSS Question

Background-image vs. input type text how to set size

Why my background can't fit input?

Here is my html code:

<input type="text" class="background"/>


and some css:

.background {
background-image: url("http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png");
bacground-size: 100%;
}


Here is codepen as well

Answer

You can set background-size to 100% 100%, background-position to 50%, background-repeat to no-repeat

.background {
  background-image: url("http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png");
  background-size: 100% 100%;
  background-position: 50%;
  background-repeat: no-repeat;
}
<input type="text" class="background" />

codepen http://codepen.io/anon/pen/xOQkbQ