Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="index.css" />
</head>
<body>
    <div id="back1">Hello world!</div><!-- Don't work anywhere, why? -->
    <div id="back2">Hello world!</div><!-- Don't work in Safari <= 8 -->
</body>
</html>

#back1,
#back2 {
  padding: 40px;
  color: white;
  background-color: black;
  background-position: center center;
  background-repeat: no-repeat;
  -moz-background-size: cover;
  background-size: cover;
}

#back1 {
  background-image: url(index1.svg);
}

#back2 {
  background-image: url(index2.svg);
}

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1080" height="720" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <filter id="svgBlurFilter">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>

  <image xlink:href="https://unsplash.it/1080/720" x="0" y="0" width="1080" height="720" filter="url(#svgBlurFilter)" />

</svg>

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1080" height="720" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <filter id="svgBlurFilter">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>

  <image xlink:href="data:image/jpg;base64, ... " x="0" y="0" width="1080" height="720" filter="url(#svgBlurFilter)" />

</svg>