Trying to make my site responsive - css

Question

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;
}

Answer 1

You could do something like this.
CSS:
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px) { /* Specific to a particular image (change accordingly*/
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
However there are different methods including a JQuery Method. You should check out some discussion about it here.

Answer 2

I am trying to get the headernew.jpg to display on an iPad properly as well as other computer screens but first just the iPad. If I remove the position: absolute then the complete header moves to the right and only shows about 50% of the header. Is there something I need to add like suggested in another post like this ..
<meta name="viewport" content="width=device-width, initial-scale=1">
if so where should it be placed?
My code now looks like this;
div.art-header-jpeg
{
position: absolute;
top: 0;
left:-50%;
width: 1344px;
height: 150px;
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
div.art-header-jpeg
background-image: url('../img/headernew.jpg');
}
background-repeat: no-repeat;
background-position: center center;
}