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.