How to add background image to Lightning component Body from static resource?

Question

I'm trying to access the body tag but it seems it's not possible using document.getElementsByTagName(tagName) and $A.util.addClass, I want to add a background image, I was trying to do it in the component's style file but couldn't make it work.

Any ideas or suggestions to follow, please?

Answer 1

You can use the .THIS class in the Lightning Component style file. .THIS refers to the whole lightning component.

Step 1:

Get the url of the static resource that is similar to this format resource/#############/resourceName.

You can get this simply by adding the static resource reference in Lightning Component Markup(Component File) - {!$Resource.imageResourceName}

Once you run the component - it will show the URL of the static resource.

Step 2:

Just grab the URL that you got in step one and add it in the .THIS class, something like this:

.THIS{
background-image: url('/resource/1556180826000/Arunachala_pic') !important; 
}

And that's it!

I hope this helps! :)

Answer 2

You can add details in cmp and js file as below example. Before you do, upload your image in static resource and get the name of image.

cmp :

<aura:component >
    <aura:attribute name="backgroundImageURL" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>   
    <div style="{!'position: relative; height: 120vh; background:' + v.backgroundColor + ' url(' + v.backgroundImageURL +') no-repeat;background-position: center;background-size: cover;'}">       
    </div>   
</aura:component>

js :

({
    doInit : function(component, event, helper) {
        var url = $A.get('$Resource.nameofyourimagefromstaticresource');
        component.set('v.backgroundImageURL', url);
    }  
})