Issue
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.
Solution
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>
Answered By - Ruhul Amin
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.