Solved
CSS Format
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?
Best answer by mattyb513
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
View original
+13Hey @Mark_R! Do you mind sending over a screenshot of your CSS code so our community members can take a look at it?
+6There 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
@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;
}``
+6```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.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.