Gradient Background Image, all I want returned is the "data:image/svg..." as a string. Is this possible?

66 views
Skip to first unread message

Mark Notton

unread,
Nov 6, 2014, 6:31:19 AM11/6/14
to compas...@googlegroups.com
Hi, 

When using something like this: 

@include background-image(linear-gradient(to right, black, red));

Compass with output this:

  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background
-size: 100%;
  background
-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #000000), color-stop(100%, #ff0000));
  background
-image: -moz-linear-gradient(left, #000000, #ff0000);
  background
-image: -webkit-linear-gradient(left, #000000, #ff0000);
  background
-image: linear-gradient(to right, #000000, #ff0000); }

Is there are way, I can create a mixin/function that will do the same job but ONLY return the "data:image" path as a string?

Thanks,

Mark
Reply all
Reply to author
Forward
0 new messages