I'm trying to use a custom image for the background of my survey.
However, any code that I paste into the 'Custom CSS' editor on the Look and Feel tab doesn't seem to be registering.
When I save the changes to the cSS editor - it simply leaves my survey preview as it originially looked.
I don't appear to be running into the same difficulty when I add java-script to individual questions, or to the header and footer sections.
Is there a particular prefix that I need to begin my code with on the CSS editor for it to be read by the system?
Page 1 / 1
It might be helpful if you posted picture of your CSS.
Hey @Mark_R! Do you mind sending over a screenshot of your CSS code so our community members can take a look at it?
There are a few things that could be happening here - one of which could be CORS or other security-type concerns with the image you are using. Check the console to see if it shows any errors regarding the image URL you have provided.
Here is some CSS I use to change the image. This also changes the background of the survey questions to be slightly transparent.
```css
/* Place your CSS here */
#SurveyEngineBody {
background: url('https://qualtricssfi.az1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_3NMGjugWuELWraZ');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.Skin #SkinContent {
background: rgba(255,255,255,.9) !important;
}
.Skin .SkinInner {
background: transparent !important;
}
```
A good way to get around security concerns is to host the image in your Graphics Library of your account and then use that URL instead. You can see that I have done this in this CSS.
Working Example: https://qualtricssfi.az1.qualtrics.com/jfe/preview/SV_20nAcnIybT3rNvT?Q_SurveyVersionID=current&Q_CHL=preview
Here is some CSS I use to change the image. This also changes the background of the survey questions to be slightly transparent.
```css
/* Place your CSS here */
#SurveyEngineBody {
background: url('https://qualtricssfi.az1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_3NMGjugWuELWraZ');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.Skin #SkinContent {
background: rgba(255,255,255,.9) !important;
}
.Skin .SkinInner {
background: transparent !important;
}
```
A good way to get around security concerns is to host the image in your Graphics Library of your account and then use that URL instead. You can see that I have done this in this CSS.
Working Example: https://qualtricssfi.az1.qualtrics.com/jfe/preview/SV_20nAcnIybT3rNvT?Q_SurveyVersionID=current&Q_CHL=preview
@mattyb513 do you know what I am doing wrong. I am trying to set my background throughout the survey to be the same color. It looks correct when in the Look and Feel panel, but when I actually take the survey the background is defaulting back to white.
``#SurveyEngineBody {
background: url('f4f2f3Z');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.Skin #SkinContent {
background: url('f4f2f3Z');) !important;
}
.Skin .SkinInner {
background: transparent !important;
}``
``#SurveyEngineBody {
background: url('f4f2f3Z');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.Skin #SkinContent {
background: url('f4f2f3Z');) !important;
}
.Skin .SkinInner {
background: transparent !important;
}``
```background: url('f4f2f3Z');``` needs to be ```background: #f4f2f3Z;```
You should only use the url attribute if you are referring to an image hosted online somewhere and are giving it the actual URL reference to that image.
You should only use the url attribute if you are referring to an image hosted online somewhere and are giving it the actual URL reference to that image.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.