SVG in background-image

Question

I am having this SASS:

.menu-inner .item-block .item-inner{
    border: none;
    background-image: url(data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%…20'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23fff'/></svg>);
}

But it is not working I keep getting error. expected a variable name (e.g. $x) or ')' for the parameter list for url

what am I missing?

Answer 1

SASS is trying to interpret your SVG as CSS/SASS. You should put quotes around the url argument. Since there are single quotes in the SVG source, use double quotes around the argument.

.menu-inner .item-block .item-inner{
    border: none;
    background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%…20'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23fff'/></svg>");
}

As an aside, the … character in your SVG seems out of place.