I am having trouble setting the background of my lightning component. I have a parent component which renders other components. These components dont fill the whole page. I am not managing to set the background color for the rest of the page. adding a div above the header that ends under the footer and adding a class with styling background-color: white; doesnt do the trick. There is a part that stays the default greyish color. Trying to select the part of the page with the chrome inspector is also not possible. This is the code of the parent component:
<body>
<div class="slds-container--center slds-container--large">
<aura:if isTrue="{!v.stepnumber==1}">
<c:B2B_Partners_Login labels="{!v.fieldLabels}" stepnumber="{!v.stepnumber}"/>
</aura:if>
<aura:if isTrue="{!v.stepnumber==2}">
<c:B2B_Partners_Forgot_Password labels="{!v.fieldLabels}" />
</aura:if>
</div>
</body>
<!-- include footer -->
<c:Partners_Footer/>
It is difficult to see but the part between the yellow arrow yellow has a different background-color. How do I set the background-color of this part?
Best Answer
Save a CSS file.
Upload CSS file in the Static resource with any name(let say ChangeBGColor)
Import the CSS in your parent lightning component using