I am developing a website and want to implement svg files to help in regards to retina displays, but want a fall back png file as a back up. 

This is the html/js;

3. <div id="band">
4. </div> <!--band--> 
5. 
   
6. <script>
7.             $(document).ready(function() {
8.                     if (Modernizr.inlinesvg) {
9.                     //SVG.
10.                 $('#band').html('<img src="barbGradient.svg"  />');
11.                     } else {
12.                     //No SVG.
13.                 $('#band').html('<img src="barbGradient.png"  />');
14.                 }
15.              });
16.     </script>

this is the css:

2. }
3. 
   
4. .no-inlinesvg div#band {
5. position: relative;
6. top: -950px;
7. background-repeat: repeat-x;
8. background-image: url('../_images/barbGradient.png');
9. z-index: -1;
10. 
    
11. }
12. 
    
13. .inlinesvg div#band {
14. position: relative;
15. top: -950px;
16. background-repeat: repeat-x;
17. background-image: url('../_images/barbGradient.svg');
18. z-index: -1;
19. }

All the browsers are rendering horribly! I know I can include two pngs at different resolution, but I find the js method to be smarter! Any help would be appreciated!