Header Background Image Position on Mobile Browsers

I'd like to show a specific part of my header bg image. I want the image to lock to the right instead of the left. I'm able to get this effect on when scaling down the desktop browser, but when I view the site on my iPhone the change isn't there. I attached an image of the desired look from a scaled down desktop browser window. To get this effect, I inserted this code into my override.css file:

Code: Select all

.gkHeaderBg {
    background-position: right -65px center;
}

Could you tell me who to get the desired effect on mobile browsers? Thank you for your help, Mike

Also, with the code I inserted, The header bg is not positioned correctly when viewed full screen on a desktop. Is there a better way of getting the desired effect?

Any ideas on solving this issue?