[SalesForce] Add background image to Lightning component in Community

I am having a component lightning added in community Napili template.

I want to add background image, to complete background.

IF you check the image below, I have one standard Napili template with standard header, and one lightning component added to center. But center position is never full width but dynamically gets the width.

I want to set a background image to complete body portion which I checked and is not able to do through COmmunity Builder or with modifying body css of the lightning component. Sorry for bad image..!!

enter image description here

Is this possible?

Best Answer

If you upload you image to a static resource. Yes.

All you need to do is go under the "Branding editor" -> Edit custom CSS and add the appropriate styling. Reference your image accordingly:

body
{

    background-image: url('https://salesforceDomain/resource/"generatedID"/StaticResourceFile/img.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

salesforceDomain -> I am assuming you know what this is...

"generatedID" -> Salesforce bundles your static resource folder into some generated ID. In order to obtain it, you can reference the image in a visualforce page and load it. Using chrome's developer tools, under the network tab you should be able to view the Request URL for the image.

VF page:

<apex:image url="{!URLFOR($Resource.FolderName,
                  'filepath/ImgName.jpg')}" />

Chrome dev tools: enter image description here

as of winter 17, you can create a Custom Theme Layouts which basically involves creating a lightning component, referenced here.

there is a more recent post in the forum that also mentions custom layouts in the Napili template here.

Related Topic