Html Question posted in
Some basic documentation can be found here.

Html – Button not Completely turning into an Image

My website I’m working on is pixel art, and I’m afraid that could possibly be the problem. In my button I can see my image, but you can also see a huge regular button behind it. I try resizing the image and it just resizes the button behind it too.

HTML:

<button><img src="images/download.png" height="60px" width="60px"></img></button>

I expected it to just show the image as the only part of the button.

Stack Overflow is telling me that there was another forum about it already and this is closed, but that’s completely different than what I’m talking about! Email me @[email protected] to answer this please unless you can answer me here.

Tags:

2

Answers


  1. 0

    As Lawrence Cherone said, applying to the background gives the — I guess — desired result.

    <button style="background-image: url('https://images.unsplash.com/photo-1714334544535-4c5eddeb0ec1');background-size: cover;width: 100px;height: 100px"></button>
    Login or Signup to reply.
  2. 0

    there is few way to fix it

    first one : you can use absolute position and set width , height to 100% , but maybeee it’s will be a little bit weird , after that you can resize button to 60px*60px or whatever size you want and after that you make button color, background-color to transparent and set border none and booom, you did it

       button{
    position: relative;
    width: 60px;
    height: 60px;
    background-color: transparent;
    color:transparent;
    border: none;
}

button img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    object-fit: cover; /** you can delete this line if you don't like to change image fit */
}

    and in second way you can use background-image for you’r button :))

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search