Search code examples
htmlcssinputbackground-image

Why is background-image not working for Input?

I have set my image input to a submit input with background-image:

<input title="Search" class="searchButton" id="searchButton" type="submit" style="background-image: url(/cdn/png/search.png); height: 34px; width: 34px;" value="">

But then it just shows as this

Please tell me how to fix this.

Solution

  • Try using background-size, background-repeat, and background-position.

    .searchButton {
  width: 34px;
  height: 34px;
  
  background-color: black;
  border: 0px;

  background-image: url(https://dinblox.org/cdn/png/search.png);
  background-size: 28px;
  background-repeat: no-repeat;
  background-position: center;
}
    <input title="Search" class="searchButton" id="searchButton" type="submit" value="">

    Or the inline CSS:

    <input title="Search" class="searchButton" id="searchButton" type="submit" value="" style="width:34px;height:34px;background-image: url(https://dinblox.org/cdn/png/search.png);background-size: 28px;background-position: center;background-repeat: no-repeat;">