How to add background in CSS?

[Ajeey]

If I use <i class="icon facebook"></i> the svg is rendered.

But say I want to add the svg as background in CSS.

.myclass {
   background: *** // How do I get the svg here?
}

[soenkekluth]

@Ajeey well you have some options.

all included templates for generating the css / scss from your svg files are using the :before selector to set the background image / size and position styles.

if that is not a problem for you you can just "extend" the icon class in your css / html <div class="myclass svg-icon-youricon"></div> which will add the icon (styles) to the :before element of your .myclass

you can also write your own template that does not use :before.

templates are here https://github.com/shakyShane/gulp-svg-sprites/tree/master/tmpl

if you use sass / scss you can make use of the mixin feature. i would use https://github.com/shakyShane/gulp-svg-sprites/blob/master/tmpl/sprite.scss and just extract the background style definition to an extra mixin. so you can use it everywhere

[rruprai]

@Ajeey Could this be what you are looking to do? Just replace with insert_dir_here with the location where the sprite is located. I just used the following below.

Possible option for insert_dir_here: '../image/sprite/{{{sprite}}}

{{#shapes}}
  {{#first}}
    .myclass {
      background-image: url('__insert_dir_here__');
    }
  {{/first}}

  .icon--{{base}} {
    /*add other code here*/
  }
{{/shapes}}

@soenkekluth using the :before attribute is a great option as well!