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

Background Color Issue with Image as a Button with HTML/CSS, how to fix?

Screenshot of attempted use of an image as a button with wrong background color that won't change

I am trying to use some images as buttons with a black background for the body of the page. Unfortunately the button has a white background behind the content of the image that I can’t get rid of, as I’d like the button’s background to match the body background’s color. I have tried background-color, background and color and several other attempts that I can’t recall. Here is my current code for the audio button, which is one attempt that doesn’t work:

.audiobutton {
    background-color: black;
    appearance: none;
    border: none;
    height: 40%;
    width: 25%;
    position: relative;
    z-index: 1;
}

It produces the effect seen in the attached screenshot, and after scouring sites like W3 I don’t know how to achieve the desired effect.

In case anyone is wondering about the HTML associated with the buttons, here it is:

<a class="audiobutton" href="audio.html">
            <button type="link">
                <img src="Renders/1-alpha-v2.png" alt="audiobutton"/>
            </button>
        </a>
Tags:

2

Answers


  1. 0

    First of all please consider that your buttons should NEVER be children of a. This may solve your problem, also please provide a code snippet and make sure the images are in an accepted format and do not have a background

    Login or Signup to reply.
  2. 0

    If the image is set as the content of the button, the background color may not be visible because the image is covering it. You can fix this by using CSS to control the size and placement of the image.
    Instead of using an <img> tag inside the button, you can set the image as a background image with CSS, and that will allow the background color to show.

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .image-button {
      width: 150px;
      height: 50px;
      background-color: #4CAF50;
      /* Button background color */
      background-image: url('your-image-url.jpg');
      background-size: cover;
      /* Cover the button */
      background-position: center;
      border: none;
      color: white;
      font-size: 16px;
      cursor: pointer;
      text-align: center;
    }
    
    .image-button:hover {
      background-color: #45a049;
      /* Change color on hover */
    }
  </style>
</head>

<body>

  <button class="image-button">Click Me</button>

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search