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
Topic Author
Offline
Junior Member

More

8 years 11 months 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:

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
Offline
LimeSurvey Community Team

More

8 years 11 months ago - 8 years 11 months 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: 8 years 11 months 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

Powered by Kunena Forum

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

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

Lime-years ahead

Legal

About Us

Open Source