adding a full size image (banner) to the first page of the survey | Experience Community
Skip to main content
Solved

adding a full size image (banner) to the first page of the survey

  • Apr 21, 2022 7:24 PM UTC
  • 2 replies
  • 1616 views

Forum|alt.badge.img+1

Hi,

Can anyone please advise me on how to add a full size image - end to end (banner) just to the first page of my survey?
Many thanks🙂

Best answer by Tom_1842

Hi there, the Text/Graphic solution will work great but it will technically be a part of the survey and might be limited by the width of the question containers. You can also approach this by going after the Logo space directly via some code.
If you have a Logo already in place for your survey, you can replace the URL of the logo for a single page by using jQuery. You can also use jQuery to adjust the styling of the new image. Place the below code in the OnLoad section of a question on the first page via JavaScript:
jQuery('#Logo img').attr('src', 'https://www.pngmart.com/files/9/Text-Banner-PNG-Transparent-Image.png');

jQuery('#Logo img').css({"height":"auto", "width":"480px"});

View original

2 replies

jmborzick
QPN Level 5 ●●●●●
Forum|alt.badge.img+41
  • QPN Level 5 ●●●●●
  • Apr 25, 2022 12:15 PM UTC

Simin There is a question type "Text/Graphic." If you select that and then change content type to "Graphic" you should be able to accomplish your goal.


Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Level 8 ●●●●●●●●
  • Answer
  • Apr 25, 2022 7:51 PM UTC

Hi there, the Text/Graphic solution will work great but it will technically be a part of the survey and might be limited by the width of the question containers. You can also approach this by going after the Logo space directly via some code.
If you have a Logo already in place for your survey, you can replace the URL of the logo for a single page by using jQuery. You can also use jQuery to adjust the styling of the new image. Place the below code in the OnLoad section of a question on the first page via JavaScript:
jQuery('#Logo img').attr('src', 'https://www.pngmart.com/files/9/Text-Banner-PNG-Transparent-Image.png');

jQuery('#Logo img').css({"height":"auto", "width":"480px"});