background img size and positioning different when viewed on actual phone

The background img of my mobile site changes size and positioning when it is viewed on my actual iphone (safari/google chrome). In google chrome dev tools it is exactly how I want it because I’ve been using dev tools to position everything.

The background is one large img file which I wanted to display a portion of on mobile and then be responsive on larger devices. I’ve viewed my site on quirktools and it is displays the way I want it to however, once again when I view it on my phone no dice…

This is how I want the background img to be displayed on mobile devices:

display on google chrome

This is what is looks like instead:

display on phone

my website is: website

I have a link to the jfiddle as well: jfiddle

body {
       overflow-x: hidden;
       background-image: url("../img/aboutBG.png");
       background-repeat: no-repeat;
       background-attachment: fixed;
       font-family: felt-tip-senior;

If anyone could help me out that would be awesome.

Thanks again,