How to resize background for desktop and mobile? | Experience Community
Skip to main content
Solved

How to resize background for desktop and mobile?

  • March 16, 2022
  • 2 replies
  • 530 views
S
Forum|alt.badge.img+1

Hi Qualtrics community
I'm struggling to resize the background for my Qualtrics survey. This is what I have:
[for desktop]:
image.png[for mobile]:
image.pngI want to have the full Company Logo as watermark in the back, but it showed up extremely fuzzy and cropped in both desktop and mobile.

My CSS script is here:
image.pngI have no experience with CSS script before, how can I resize Company Logo to fit the screen for both desktop and mobile users?

Many thanks!

Best answer by ColbyA

Hey sophietwu ,
One of the key parts for a background image is using a large size, high resolution and quality image. To start, just consider proportion of a small/medium image to be stretched for desktop use and it likely won't be clear.
Consider asking your design team for a new logo image that would also look clear and be appropriate for use as a desktop background.
What I've found to work the best is asking my MarComm team to design a desktop quality image to use as a survey background. It won't always align perfectly with mobile but centering the logo or most important part can help.
An example. This is a repurposed desktop image our staff uses as a video call background which also fits well with the theme for a survey we send for construction clients.
Background.PNG

2 replies

ColbyA
Level 4 ●●●●
Forum|alt.badge.img+23
  • ColbyA
  • Level 4 ●●●●
  • Answer
  • March 17, 2022

Hey sophietwu ,
One of the key parts for a background image is using a large size, high resolution and quality image. To start, just consider proportion of a small/medium image to be stretched for desktop use and it likely won't be clear.
Consider asking your design team for a new logo image that would also look clear and be appropriate for use as a desktop background.
What I've found to work the best is asking my MarComm team to design a desktop quality image to use as a survey background. It won't always align perfectly with mobile but centering the logo or most important part can help.
An example. This is a repurposed desktop image our staff uses as a video call background which also fits well with the theme for a survey we send for construction clients.
Background.PNG

S
Forum|alt.badge.img+1
  • sophietwu
  • Author
  • March 20, 2022

https://community.qualtrics.com/XMcommunity/discussion/comment/44730#Comment_44730Many thanks, that seems to resolve our issue! :D

    Terms & ConditionsAccessibility statement