function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
imrohitimrohit 

how to set background image in div tag of lightning component someone please explain with example

Best Answer chosen by imrohit
Raj VakatiRaj Vakati
 
  
<aura:attribute name="backgroundImageURL" type="String" default=""/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>   
    <div style="{!'position: relative; height: 30vh; background:' + v.backgroundColor + ' url(' + v.backgroundImageURL +') no-repeat;background-position: center;background-size: cover;'}">
        
    </div>
  
doInit : function(component, event, helper) {
        var url = $A.get('$Resource.aaaaaaaaaaaaaa');
        component.set('v.backgroundImageURL', url);
    }

 

All Answers

Raj VakatiRaj Vakati
 
  
<aura:attribute name="backgroundImageURL" type="String" default=""/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>   
    <div style="{!'position: relative; height: 30vh; background:' + v.backgroundColor + ' url(' + v.backgroundImageURL +') no-repeat;background-position: center;background-size: cover;'}">
        
    </div>
  
doInit : function(component, event, helper) {
        var url = $A.get('$Resource.aaaaaaaaaaaaaa');
        component.set('v.backgroundImageURL', url);
    }

 
This was selected as the best answer
david willy 1david willy 1
http://www.familit.com/phpBB2/viewtopic.php?t=28369
http://www.familit.com/phpBB2/viewtopic.php?p=29438
Riya DharRiya Dhar
If you upload your image to a static resource. 
All you need to do is go under the "Branding editor" -> Edit custom CSS and add the appropriate styling. Reference your image accordingly, for example:
body
{
background-image: url('https://salesforceDomain/resource/"generatedID"/StaticResourceFile/img.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
VF page:
<apex:image url="{!URLFOR($Resource.FolderName,
'filepath/ImgName.jpg')}" />

Hope this helps.
Regards: Salesforce Training in Pune (https://www.sevenmentor.com/salesforce-training-in-pune.php)