4

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?

Improve this question
1
  • Were you able to change your background image? you never confirmed. Thanks
    – glls
    May 9, 2017 at 9:32

2 Answers 2

Reset to default
2

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.

Improve this answer
1

The answer is "it may be" and it depends on how you do it. The LDS supports images, but not explicitly in the context that you're asking about. So whatever you do will wind up being something of a "kludge" for a couple of reasons. One, in particular, is that Lightning Components are resizable. Bitmapped images don't lend themselves to being resized to different proportions very well.

With that having been said, LDS supports images that it refers to as "Avatars". These can also be combined with other elements like text, to create what are referred to as "Media Objects". LDS also allows you to create "Tiles" which in some of the example documentation, include Media Objects. Any of these approaches would seem to allow you, through the use of CSS, to create a background with the image of your choice.

Improve this answer
3
  • wow that is some deep diving, but can i modify the standard template like Napili etc to get a complete background image as that does not seem to be possible. CUrrently it looks like if I add a lightning component, then it will only occupy a fixed width in center and rest complete background remains white only. Any idea regaring same? Thanks
    – SEuser
    May 15, 2016 at 15:57
  • Napoli, like any other template is controlled by CSS. You'll need to modify the CSS to get what you want. Look for the Background property.
    – crmprogdev
    May 15, 2016 at 17:08
  • I am using the COmmunity builder and and added image of the community where I want to add the background image
    – SEuser
    May 15, 2016 at 19:48

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .