David Borrink on "Background image (in content) not responsive in Twenty Twelve"

I have a logo and large image in my body tag that fills the width of the body area on my site. I just discovered on a tablet that my image is not being responsive and is wider than the body area, being cut off on the ends on tablets. Yikes.

Obviously I need to use a percentage on my CSS. But I'm not figuring how to do that. My CSS says:

body .site {
    background: url("images/ampersand-logo-tagline-background.jpg")
    no-repeat scroll center top #FFFFFF;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    margin-bottom: 3.42857rem;
    margin-top: 0rem;
    padding: 0 2.85714rem;
}

This basically acts as a combination header/background image and it includes a large faded ampersand in my page background. I've tried adding width call-outs like 75% but that's not working in the CSS. Do I need to set a callout like body background-img or something. I'm at a loss to know how to make my single large background image responsive like the rest of twenty twelve when it appears on a tablet.