We have to use the background-size property in order to ensure the seaweed is constrained appropriately. We will put the background-size property right in the ruleset that holds the non-retina version at the top of our footer section, not inside the media query. We could easily put it in the media query and that would be fine and dandy, but this is going to apply to non-retina devices and retina devices, so we'll just add a background size of 200px horizontally and 100px vertically, as shown in the following code:
footer { background: #fff url('../images/seaweed.jpg') repeat-x 0 0; background-size: 200px 100px; padding: 142px 0; font-size: 14px; line-height: 1.7; }
Save this and go to the browser. ...
