background-image without background-CodePudding

I am using button with background-image property set. Image I'm using is partially transparent and by default it has grey background. When I tried to use background: transparent/white, suddenly my image no longer scales, although I use background-size: cover/contain.

Is there a way to achieve this without using <img> inside button?

Or perhaps is there a way to change HTML properties with CSS? Because I am forging HTML in java and it's simpler to use CSS classes with background-image than to add <img> every time.

CodePudding user response：

You can use background instead of background-image

The CSS code :

background: url('../image/button.png') no-repeat;

Example :

<html>
    <head>
        <style type="text/css">
            .btn{
                background: url(../image/button.png) no-repeat;
                cursor:pointer;
                border: none;
            }
        </style>
    </head>
    <body>
    <div id="submitForm">
        <input class="btn" type="button" name="button" value="Search"/>
     </div>          
    </body>
</html>

CodePudding user response：

You can achieve it with input tag of type="imge"

<input type="image" id="image" alt="Login"
       src="/media/examples/login-button.png">

MDN link

OR, you can add background-image as shown below:

.btn{
  width:200px;
  height: 50px;
  background-image: url(//unsplash.it/800);
  background-repeat: no-repeat;
  background-position: center;
  font-weight: 900;
  cursor:pointer;
  border: none;
  }

<form>
   <input class="btn" type="submit" value="Submit"/>
</form>