I am currently facing an issue with my CSS code on iPad. I want to change the background-image displayed based on whether the user is using an iPad or not. Specifically, I want to use headerold.jpg as the background-image for iPads while keeping headernew.jpg for other devices. The problem I'm encountering is that part of each end of the current image is getting cut off on iPads. I have attempted using @media queries but haven't been successful in making it work. Any guidance on this matter would be greatly appreciated.
Thank you, 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;
}