How to Override community background image/color in the Napili template?

Question

I've been testing the customization capabilities of communities with napili template. One thing i found, I can update the logo, but not the community background. It seems I need to override the CSS, found the below snippet that helps to change the background,

.default-bg-overlay { background: white none repeat scroll 0 0 !important; }

The above one change the header color, but not the body, I also cannot set the background image. What would be the right way set community background?

Kondo Nakamura · Accepted Answer

To update the community background, in the branding editor, there should be an "edit" pencil or brush referring to "Edit CSS" from there you can change the background with appropriate css styling. for Ex. body { background: red; } You should see your "body" change color. Please refer to this documentation for further customizations. UPDATE (Witner '18):Lightning Communities now support changing the background color from the Branding Editor's properties:

Lite Geometry · Answer

Thanks

Elvinew · Answer

Regarding the background image, you need to make sure the image URL is correct. You can upload the image to Salesforce Files and get the URL from Geometry Vibes.

How to Override community background image/color in the Napili template?

About this question

Your answer

3 Answers

More Salesforce discussions

Learn & Explore

Salesforce Tutorials

Salesforce Interview Q&A

Latest Salesforce Blogs

Want answers to more Salesforce questions?

Stay in the loop — it’s free

You’re on the list!