Page specific css @media and iphone portrait view

Hello Support, thank you in advance if anyone can help me with this quagmire, what am I doing wrong:

URL: http://www.huntgintinglearninghelps.com/testing

Renders fine for me in iphone 6 landscape, a bunch of android/chrome browsers. But, in straight up iphone portrait, the image gets quashed, the image really quashes up. Here are details:

smaller image file: 640 × 568
larger image file: 920 x 568

page specific css with an @media query:

.page-id-254 {
         background-image: url("http://huntingtonlearninghelps.com/wp-content/uploads/2016/11/form_satprepLargeImage.png");
         background-repeat: no-repeat;
         background-size: 100% 100%; 
}

@media only screen and (min-width: 320px) and (max-width: 667px) {
  .page-id-254 {
    background-image: url("http://huntingtonlearninghelps.com/wp-content/uploads/2016/11/form_satprepSmallImage.png");
overflow-x:hidden;
  }
}

.pagebreak_social {
    background-color:#3ea085;
    border: none;
    height: auto;
    text-align: center;
    width: 100%;
    padding-top:15px;
    padding-bottom:10px;
}

Fairly stumped on this, I'm no css whiz, but I've got it looking close to how I need.

Thank you, and as I always say, this theme is 110%!

Richard