Trying to make my site responsive

Trying to make my site responsive

I am using the following css code. What I want to do is if the user is on
a iPad I want the background-image to be headerold.jpg or some way to make
the current headernew.jpg to display properly on the iPad. Currently part
of each end is cut off. I have tried @media query but I am not able to get
the code to work. Any help would be appreciated.
Thanks Roger
div.art-header-jpeg
{
position: absolute;
top: 0;
left:-50%;
width: 1344px;
height: 150px;
background-image: url('../img/headernew.jpg');
@media all and (max-width: 1000px) {background-image:
url('../img/headerold.jpg');}
background-repeat: no-repeat;
background-position: center center;
}