How can you centre the background on the left on mobiles - see preview?

Hi,

I have used a CSS and managed to get it nice on the actual preview on Qualtrics. Seems to work also on androids. But why when I open the survey on my iphone looks horrible?

I attach a picture of how the preview should be and a picture of my iphone to show how horrible it is.

What I aim for:
What I have:


This is the CSS I have used (please note that I am a newbie and never used CSS before)

.Skin, #SurveyEngineBody {
background:final.jpg!important;
background-size: cover;
background-repeat: no-repeat;
background-position: left;
}

.Skin #SkinContent {
background:final.jpg!important;
}

.Skin .SkinInner {
background: transparent!important;
}

@media (min-width: 1200px) {

.bgimg {
background-position: left left;
}


@media (min-width: 992px) and (max-width: 1199px) {

   .bgimg {
background-position: left left;  }
}

@media (min-width: 768px) and (max-width: 991px) {

     .bgimg {
background-position: left left;   
}



@media (max-width: 767px) {

     .bgimg {
background-position: left left;
}


@media (max-width: 480px) {
Thank you!
Alex