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

More
1 month 6 days ago #159527 by Payek
Payek created the topic: Background image only in "welcome message" and "end message"
Hi,
Is it possible to add image background only to "welcome message"? I found solution for the whole template here:

Ben_V wrote: :unsure:

body {
background-image:url('http://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

Please Log in to join the conversation.

More
1 month 6 days ago - 1 month 6 days ago #159538 by tpartner
tpartner replied the 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:

$(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:

.welcome-page {
	background-image: url(http://example.com/..../welcome-page.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
 
.end-page {
	background-image: url(http://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: 1 month 6 days ago by DenisChenu. Reason: Usage of example.com
The following user(s) said Thank You: DenisChenu, Payek

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!