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

AlexPanicAlexPanic SeattleCommunity Member Qubie ✭

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

Tagged:

Answers

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭
    edited May 29

    @AlexPanic

    Your CSS is missing some } symbols, but maybe it is just because it wasn't formatted as code.

    Anyway, the size of the image may be tripping up Safari on the iPhone. You could create a different, smaller background image specifically for mobile phones then add it as the background in your max-width:480px media rule.

  • AlexPanicAlexPanic SeattleCommunity Member Qubie ✭

    Hi,

    Thanks for answering. It does not work on Chrome, Opera, Mozilla, those that I tried. Seems iphones have issues with this as the system does not 'contain' the picture and ends up over zooming it. Even with smaller background was the same.

    This seems to have sorted it:


    body#SurveyEngineBody:after{

       content:"";

       position:fixed;

       top:0;

       height:100vh;

       left:0;

       right:0;

          background: url(add) center center;

       -webkit-background-size: cover;

       -moz-background-size: cover;

       -o-background-size: cover;

       background-size: cover;

    background-repeat: no-repeat;

    background-position: left top;

    }

Sign In to Comment