-1

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.

EDIT: Suggested answer: How to add background image for input type="button"? doesn't cover my question, although solution appears there in comments but for different reason. Said question is about adding background image to <input type="button"> which is different from my <button> and I had no problem with adding image in the first place (my image was added) and in mentioned question the problem laid in a typo.

To make it more clear my code was:

<button style="background-image: url('/path/to/my/image'); background-size: cover;">

and it worked fine, but - since image itself was transparent in some places - there was grey background visible from underneath. When I changed my code to:

<button style="background-image: url('/path/to/my/image'); background-size: cover; background: transparent;">

I got rid of grey background but my image did not scale down to the button width anymore.

Changing it to use background: url('/path/to/my/image'); resolved the problem.

jbulatek
  • 154
  • 10
  • Does this answer your question? [How to add background image for input type="button"?](https://stackoverflow.com/questions/2738920/how-to-add-background-image-for-input-type-button) – Wala Al Ramadhani Nov 07 '21 at 14:20
  • Please could you put your code into the question. It's impossible to tell what is happening from just the description, though I'm suspicious of setting background: transparent as opposed to background-color: transparent. – A Haworth Nov 07 '21 at 14:24

2 Answers2

1

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>
Ruhul Amin
  • 821
  • 11
  • 14
0

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>
Dibas Dauliya
  • 639
  • 5
  • 20