How to add png background image AND fill color to SVG?

Question

I know this is possible for regular html elements, and I know how to add fill color or a background image to an SVG. But is doing both possible? I'm just trying to add a filter effect to these background(fill) colors.

.element {
  background-color: rgba(0,0,0,.1);
  background-image: url('images/filter/grunge.png');
}

Answer 1

Your question is unclear.

Do you mean like this?

 svg { background-color: blue; background-image: url(http://lorempixel.com/300/200/); background-repeat: no-repeat; filter: blur(3px); } 

 <svg width="400" height="200"> <circle cx="100" cy="100" r="50" fill="red"/> </svg>