I made a translucent svg. It was a 50% opacity round metal texture. When I put it above any other color it makes it look like real metal. It was made using Illustrator and had 2 of its effects: Pixelate>Mezzotint>GrainyDots and Blur>RadialBlur. Then I made a Clipping Mask. You can see it here.
When I normally open it, it views correctly, but when I use it as a background in CSS3 for my HTML5 page, it doesn't open. I am sure it's not my CSS coding's fault because when I use another very simple svg as my background, it opens.
I think it could be the Illustrator effects, maybe they don't view when you use it as a background. Also these effects make it of 4.46mb. Please suggest a solution. Making it a png wouldn't work because sometimes it needs to cover extremely long pages.