In our CSS, inside the rule set targeting the footer, all I'm going to do is change the format from .jpg to .svg—that is, from ('.../images/seaweed.jpg') to ('.../images/seaweed.svg'), as shown in the following code:
footer { background: #fff url('../images/seaweed.svg') repeat-x 0 0; background-size: 200px 100px; padding: 142px 0; font-size: 14px; line-height: 1.7; }
Since now we have an SVG that's going to work for both non-retina and retina devices, we'll go down to the very bottom and comment out this media query from our last section:
/***************Retina, Background Images***************//***********@mediaonly screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min-resolution: ...
