Q:

Use @media to target computer screen

I have a website. The content is set to 960px wide and devices that are wider than that see the solid colored body element. I am trying to add a background-image to that body, but I only want it to load on devices that can see the body, so that other devices don't need to waste time loading it if they can't see it.
For example, my viewport meta tag is set to a static 960px (I know it's not recommended), so phones won't be able to see the body because they are automatically scaled to 960px in width.
How can I display the background-image on only devices that are more than 960px wide, using the @media in the CSS?

A:

How can I display the background-image on only devices that are more than 960px wide, using the @media in the CSS?
Do you mean this?
body{
  background:url('http://mobilemarketingwatch.com/wp-content/uploads/2016/01/Is-Google-Searching-for-the-Next-Big-Thing1.jpg');
}

@media only screen and (max-width: 960px) { 
    body{
       background:none;
    }
}

DEMO
If you resize your browser the body background image will gone.

