Hello :-)
I am currently updating my survey look and feel and changing the image background. One of the images I have is in "portrait mode" and it displays quite nicely on a mobile:
!
However it displays poorly on desktop, as Qualtrics centers the image by default:
!
Is there a way to force the image to be aligned at the top instead of center?
Thanks for your help!
Page 1 / 1
Hi @DaisyD
Even if we change the image background to align with top on the desktop. It would be filled with white bars to either side to compensate for the wider space available in desktop. Is this what you are looking for ?
Even if we change the image background to align with top on the desktop. It would be filled with white bars to either side to compensate for the wider space available in desktop. Is this what you are looking for ?
Hi @NiC,
Thanks for helping out! I don't want any white bars obviously but I'm not sure why aligning top instead of center would make bars appear? Is there a code that I can try to see what it would look like, and if indeed there are bars?
Best
Thanks for helping out! I don't want any white bars obviously but I'm not sure why aligning top instead of center would make bars appear? Is there a code that I can try to see what it would look like, and if indeed there are bars?
Best
Hi @DaisyD
If we align image from center of the screen as the image is narrow than the montiors aspect ratio.
Below is preview link of one such case:
https://ugamsandbox.ca1.qualtrics.com/jfe/preview/SV_eeuHvx23JiwrYGh?Q_SurveyVersionID=current&Q_CHL=preview
If we align image from center of the screen as the image is narrow than the montiors aspect ratio.
Below is preview link of one such case:
https://ugamsandbox.ca1.qualtrics.com/jfe/preview/SV_eeuHvx23JiwrYGh?Q_SurveyVersionID=current&Q_CHL=preview
Try putting this in your Custom CSS area:
```#SurveyEngineBody{background: url( YOUR URL HERE) no-repeat center top !important ;}
```
You may need to resize the image to make it fit perfect at a reasonable resolution.
```#SurveyEngineBody{background: url( YOUR URL HERE) no-repeat center top !important ;}
```
You may need to resize the image to make it fit perfect at a reasonable resolution.
@Kate thank you so much!
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.