Adding in a back-ground image for ChoiceStructure

Question

I am trying to insert a back-ground image behind the ChoiceStructure for individual questions (so for some question answer options but not others). Is there a simple way to do this? I am not proficient in CSS or HTML but am happy to make small edits to suit.
I was able to do this behind ALL answer options using CSS as follows:
.ChoiceStructure {
background-image:url("URL");
background-repeat: no-repeat;
width: 100%;
height:100%;
background-position: center center;
text-align:center;
margin:auto;
padding:0;
}

faris · Accepted Answer

helzpieOT Sounds like you want to use Javascript.
You can use the code below just be sure to swap out the URL value to the desired URL.
Qualtrics.SurveyEngine.addOnReady(function() {
var qid = this.questionId;
var url = 'INSERT_URL_HERE';
document.querySelector('#'+qid+' .ChoiceStructure').style.background = 'url("'+url+'") no-repeat center center';
document.querySelector('#'+qid+' .ChoiceStructure').style.width = '100%';
document.querySelector('#'+qid+' .ChoiceStructure').style.height = '100%';
document.querySelector('#'+qid+' .ChoiceStructure').style.margin = 'auto';
document.querySelector('#'+qid+' .ChoiceStructure').style.padding = '0';
});

If you don't know how to add JS to a question, see support page: https://www.qualtrics.com/support/survey-platform/survey-module/question-options/add-javascript/

helzpieOT · Answer

Awesome thank you so much, works exactly as I expected. ☺️

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded