Apex Code Development You need to sign in to do that
Don't have an account?
how do i add background image to salesforce lightning
How can i add background image to lightning component like below existing quiz page 
and align the entire content to center of page with my lightning component..below is my draft lightning page component
also how can i add next button in my below salesforce code
here is my cmp page code
also how can i add next button in my below salesforce code
here is my cmp page code
here is my cmp page code
<aura:component > <h1>How Much Weight You Want To Loose</h1> <aura:attribute name="options" type="List" default="[ {'label': 'Not Sure', 'value': 'option1'}, {'label': 'Greater Than 40 lb', 'value': 'option2'}, {'label': 'Less Than lb', 'value': 'option2'}, {'label': 'Will Decide Later', 'value': 'option2'}, ]"/> <aura:attribute name="value" type="String" default="option1"/> <lightning:radioGroup name="radioGroup" label="Select Your Option Then Click Next" options="{! v.options }" value="{! v.value }" type="radio"/> </aura:component>
Step-1: In order to use the image as background image you have to first upload the image in static resource Please refer to the following link as it may be helpful in uploading your image in the static resource.
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_resources_create.htm
Step-2: please refer to the following code in order to use your image as a background image.
lightning Component:-
<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>
js Controller:-
doInit : function(component, event, helper) {
var url = $A.get('$Resource.aaaaaaaaaaaaaa');
component.set('v.backgroundImageURL', url);
}
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks and Regards,
Deepali Kulshrestha
All Answers
Sorry for this issue you are facing.
Please try the sample code below and tweak it as per your requirement.
<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); }Hope this helps.Kindly mark this as solved if the reply was helpful.
Thanks,
Nagendra
Step-1: In order to use the image as background image you have to first upload the image in static resource Please refer to the following link as it may be helpful in uploading your image in the static resource.
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_resources_create.htm
Step-2: please refer to the following code in order to use your image as a background image.
lightning Component:-
<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>
js Controller:-
doInit : function(component, event, helper) {
var url = $A.get('$Resource.aaaaaaaaaaaaaa');
component.set('v.backgroundImageURL', url);
}
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks and Regards,
Deepali Kulshrestha