SVG background covers button color in CSS

Question

I have an svg image that I would like to be contained inside of a white button, however, inserting it into the background in CSS covers the white color of the button completely. How does one avoid this in CSS?

Button with svg background:

#rack-button {
    position: absolute;
    background: url('simple_rack.svg') no-repeat top left;
    background-size: contain;
    display: inline-block;
    width:  35px;
    height: 35px;
    left: 10%;
    border-radius: 5px;
    color:#fff;
}

Button without svg background:

#rack-button {
    position: absolute;
    width:  35px;
    height: 35px;
    left: 10%;
    border-radius: 5px;
    color:#fff;
}

Answer 1

Your initial button CSS has no background-color stated so this must be stated somewhere else in your CSS.

#rack-button {
  position: absolute;
  width:  35px;
  height: 35px;
  left: 10%;
  border-radius: 5px;
  color:#fff;
}

When you added the image background you overrode the original background color and substituted a transparent image, so the body background shows through

#rack-button {
  position: absolute;
   background: url('simple_rack.svg') no-repeat top left;
   background-size: contain;
   display: inline-block;
  width:  35px;
  height: 35px;
  left: 10%;
  border-radius: 5px;
  color:#fff;
}

You just need to add the background color back

#rack-button {
   background: white url('simple_rack.svg') no-repeat top left;
}

or

#rack-button {
   background: url('simple_rack.svg') no-repeat top left;
   background-color:white;
}