I’d like to add a background image to a general message in my Messages library that the Authentication Prompt Text points to.
I have been successful in adding some CSS to the Message file’s source code to make the background image appear how I want it to when I view it in the Messages Library. However, when I go to look at it in the web browser, the background image does not appear (have tried saving, refreshing my Qualtrics account, refreshing the browser page, using a private window, using different browsers, etc.).
I was thinking maybe I just needed to put the code in the Look & Feel/Advanced Custom CSS area, but that didn’t work either. The other complication is that I want this background image to appear ONLY on the authentication page.
I have VERY limited knowledge of CSS and HTML. From what I’ve read, HTML does not support this type of request anymore.
Here is the code I’m currently using (pulled from a CSS discussion forum online and altered slightly for my specific circumstances):
<title></title>
<!-- Styles -->
<style type="text/css">
body {
background-image: url("https://umn.qualtrics.com/...");
background-size: cover;
background-color: rgba(255, 255, 255, .6);
background-blend-mode: lighten;
background-repeat: no-repeat}
</style>
Any help would be much appreciated!
Page 1 / 1
Hi @deveny
Here is an example of some HTML you can paste in the source view of the General Message to get a background image:
```html
<style>
html body#SurveyEngineBody {
background: url('https://cdn.pixabay.com/photo/2017/01/26/21/32/background-2011768_1280.jpg');
}
</style>
Any authentication text can go here
```
Notice that I'm selecting the body by ID here. This is because it is more specific than just body, and specificity is what matters most in CSS. If trying to override styling, be specific as possible!
A good way to debug this is to open up the Inspect and go to the Elements tab. Find the `<body>` tag and click on it, and then look at the CSS that is attached to the body below. Find your CSS and it will probably be crossed out because it's overridden by other styling. Take a look at that styling and see what made it more specific.
!
A common way of ensuring you have the most specific CSS is adding `!important` to the end of the attribute, like this:
```css
#MyElement {
display: none !important;
}
```
Working Example: https://qualtricssfi.az1.qualtrics.com/jfe/preview/SV_5gonN1PYaF9TYiN?Q_SurveyVersionID=current&Q_CHL=preview
Hope this helps!
Here is an example of some HTML you can paste in the source view of the General Message to get a background image:
```html
<style>
html body#SurveyEngineBody {
background: url('https://cdn.pixabay.com/photo/2017/01/26/21/32/background-2011768_1280.jpg');
}
</style>
Any authentication text can go here
```
Notice that I'm selecting the body by ID here. This is because it is more specific than just body, and specificity is what matters most in CSS. If trying to override styling, be specific as possible!
A good way to debug this is to open up the Inspect and go to the Elements tab. Find the `<body>` tag and click on it, and then look at the CSS that is attached to the body below. Find your CSS and it will probably be crossed out because it's overridden by other styling. Take a look at that styling and see what made it more specific.
!
A common way of ensuring you have the most specific CSS is adding `!important` to the end of the attribute, like this:
```css
#MyElement {
display: none !important;
}
```
Working Example: https://qualtricssfi.az1.qualtrics.com/jfe/preview/SV_5gonN1PYaF9TYiN?Q_SurveyVersionID=current&Q_CHL=preview
Hope this helps!
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.