SVG background covers button color in CSS

debugcn Published at Dev

the_darkside

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;
}

Paulie_D

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;
}

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-08-8

Comments

0 comments

From Dev

Using background view for UITableViewCell in iOS 7 covers default delete button

From Dev

Changing background color of button with inline CSS

From Dev

Changing HTML button tag background color with css?

From Dev

CSS / TableTools: Button background-color does not change

From Dev

CSS issue with background button

From Dev

css img background color

From Dev

CSS - Change button background color on hover

From Dev

SVG element background color

From Dev

Fade background color of button on hover css

From Dev

SVG text color with correspond to background

From Dev

css button with image as background

From Dev

How to change SVG color (when using the SVG as background in CSS)

From Dev

Reset Background color CSS

From Dev

Why cannot override CSS background color on Bootstrap button?

From Dev

Using background view for UITableViewCell in iOS 7 covers default delete button

From Dev

css background to radio button

From Dev

CSS background color issue

From Dev

CSS issue with background button

From Dev

change the background color of the button

From Dev

CSS Background Color

From Dev

Change the background color of a button

From Dev

CSS background color not registering

From Dev

css button with image as background

From Dev

Radio button not changing background color HTML/CSS

From Dev

HTML CSS: Switch/Change background color of div, color of label text on radio button selection

From Dev

Overwrite color and background with css

From Dev

Button background color in webpart

From Dev

CSS change body background-color on button hover?

From Dev

CSS Button color only change word's background color no whole button when hover

Related Related

Article