Search code examples
htmlcssreactjssemantic-uisemantic-ui-react

Change svg image background color on html?


I am displaying images dynamically (fetching them from an API). Their background is transparent (alpha). I also have background color I for the images to be on top of on. How would I add this background color to the image on html? I have an Image React class (from Semantic-Ui-React) but ignore this. The attribute of will work the same. the "fill" and "color" here are just my attempts that didn't work. The rest of the attributes are irrelevant.

             <Image
                align="left"
                color="green"
                fill="red"
                src={image}
                size={this.state.tokenImageSize}
                avatar
                onMouseEnter={e =>
                  this.setState({
                    tokenImageSize: "medium",
                    textHeaderSize: "h1"
                  })
                }
                onMouseLeave={e =>
                  this.setState({
                    tokenImageSize: "tiny",
                    textHeaderSize: "h4"
                  })
                }
              />

Solution

  • The typical way to change background colours in HTML elements is to use the style attribute, and set background-color to the colour you need.

    For example, you could add to your <image/> tag this attribute:

    style='background-color: blue'