CSS is ignoring background-image property

Question

I have this div

  export const LIIconHolder = styled.div`
  margin-right: 16px;
  width: 16px;
  height: 16px;
  border: solid 1px #45cc8a;
  border-radius: 20px;
  text-align: center;
  background-image:url(${check});

 `

check is an svg icon.

Somewhy the icon is not being displayed.The path is correct I checked it.

I checked inspect element and it is not reading it

Any suggestions on how to fix this?

Have you tried bringing up the console and inspect the element? — Hao Wu, Sep 24 '20 at 10:25
Yep,In inspect element it is not reading the background-image property — Nika Roffy, Sep 24 '20 at 10:27
When you say it's an SVG, is it a path to an SVG? A data URL? An imported SVG file? — DBS, Sep 24 '20 at 10:28
Try to use `background` instead of `background-image`. Reference: [CSS difference between background and background-image](https://stackoverflow.com/questions/39607999/css-difference-between-background-and-background-image#:~:text=2%20Answers&text=In%20a%20background%20property%20you,only%20allowed%20to%20add%20image.&text=By%20using%20background%2C%20you%20need,the%20background%20of%20the%20page.) — xKobalt, Sep 24 '20 at 10:30
Could you expand the code snippet? At the moment we can't even tell if `url(${check})` is valid code as there are no backticks visible. It might need to be `\`url(${check})\`` depending on where it's being used. — DBS, Sep 24 '20 at 10:32
[This question](https://stackoverflow.com/questions/51244463/react-svg-component-as-background-image-to-div) seem very similar, perhaps some of the answers there may be helpful. — DBS, Sep 24 '20 at 10:35

score 0 · Answer 1 · answered Sep 24 '20 at 11:09

0

maybe u tried to do this:

background-image:url(${({check})=>check});

instead of this:

background-image:url(${check});

answered Sep 24 '20 at 11:09

adir abargil

5,495
3
19
29

CSS is ignoring background-image property

1 Answers1