0

I am trying to display this background image through a CSS class but it gets cut off at one side: Info Button/Image

My CSS class looks like this:

.info-button-example-example{
  background-image: url("data:image/svg+xml;base64);
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: 24px;
  width: 24px;
  height: 24px;
  display: inline-block;
  margin: 10px 0 12px 16px;
  &:hover {
    cursor: pointer;
  }
}

I guess you can spot on the screenshot I attached that the left side of the circle does not get displayed correctly. It should look like this: Expected View of Info-Button

Just a side question: I took over this project in September and I never saw someone rendering background images through CSS. Is that common practice and a good way or should I think about refactoring this part of the code?

Steffen Ebert
  • 67
  • 10
  • 1
    You have never seen background image in CSS? **WHAT**? It's like very common. So either make sure your image is 24px dimensions or make `background-size: contain` to fit your container – Justinas Nov 30 '20 at 09:38
  • @Justinas Good to know! Yes that did answer my question. – Steffen Ebert Nov 30 '20 at 10:07

0 Answers0