Dynamic setting of container background image - service portal

[jasonalldridge]

We need to be able to dynamically change the background image set in the container the Homepage search widget resides in on the main landing page of the service portal.

As such we need to be able to get to the container element to set the background image in the link function, and the only way we've been able to find this element is by using the following:

function(scope, element){
	var d = $(element).parent().parent().parent().parent().parent().parent().parent()[0];
	d.style.backgroundImage = 'url('+scope.data.image+')';
}

However the downside is that if the DOM changes this will fail.

Can anybody recommend a better way of doing this? 

$('.cbe98a8d2cb20020000f8d856634c9c63').css("background-image","url('+c.data.image+')"); doesnt work due to JQuery restriction in the portal.

Cheers

[Zack Fanning1]

Same issue, did you ever find resolution to this?

[jasonalldridge]

Unfortunately not 😞

I did get a suggestion of using a css class which can be specified in the parent class of the container, but never got this to work.

[Zack Fanning1]

Figured out a solution that works for the main area. I assume it would work for the search section too if you grabbed the first child (assuming search is in your first container).

link 

var main = $('[role="main"]')[0];
if(scope.data.background_image_url){
main.style.backgroundImage = 'url(' + scope.data.background_image_url + ')';
main.style.backgroundPosition = 'center';
main.style.backgroundRepeat = 'no-repeat';
main.style.backgroundSize = 'cover';
}

[Vivek Verma]

Hi Zack,

I am facing the same issue, 

Would you please help to implement the same logic.

But I want to a bit more information like where should I use this script?

Thanks

Vivek (LinkedIn)