Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Background image only in "welcome message" and "end message"

  • Payek
  • Payek's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
7 years 3 weeks ago #159527 by Payek
Background image only in "welcome message" and "end message" was created by Payek
Hi,
Is it possible to add image background only to "welcome message"? I found solution for the whole template here:

Ben_V wrote: :unsure:

Code:
body {
background-image:url('https://yourinstall.com/..../ei.png');
background-repeat:no-repeat;
background-position:center center;
}


and it's (after small adaptation) working form me, but I try to add exclusive (different) image background for a "welcome" and "end" messages. It is also important to me, that the solution will look good on mobile devices because I expect the most of the Respondents will complete the survey on mobile phones.

I will be grateful for the tips on how to achieve this.

Payek


My Lime is Version 2.70.0+170921
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 3 weeks ago - 7 years 2 weeks ago #159538 by tpartner
Replied by tpartner on topic Background image only in "welcome message" and "end message"
Adding something like this to the end of template.js will give the <body> element in those pages a specific class:

Code:
$(document).on('ready pjax:complete',function() {
  if($('#welcome-container').length > 0) {
    $('body').addClass('welcome-page');
  }
  if($('.completed-table').length > 0) {
    $('body').addClass('end-page');
  }
});

Then you can target those classes in template.css something like this:

Code:
.welcome-page {
  background-image: url(https://example.com/..../welcome-page.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
 
.end-page {
  background-image: url(https://example.com/..../end-page.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 7 years 2 weeks ago by DenisChenu. Reason: Usage of example.com
The following user(s) said Thank You: DenisChenu, Payek
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source