[SalesForce] Background-color lightning component

I am trying to set the background-color of my lightning component, I cant figure out what css I should use. By doing this: 

.THIS {
  background-color: white; 
}

The larger part of the background becomes white, but the space between the footer stays the default color (greyish/blueish). 

.THIS {
  background-color: white;
  height: 100%;
}

Makes the whole page white. Anyone an example? Thanks in advance

This is the code of the component: 

    <c:Partners_Header stepnumber="{!v.stepnumber}" header="{!v.header}"/>

    <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/>

Different background color

Best Answer

You need to wrap your component content like this -

<aura:component>
  <div class="slds-box slds-theme_default">
     //your component content
  </div>
</aura:component>

then your component background would be default white. For more information - https://www.lightningdesignsystem.com/utilities/themes/

or if you want some other background color then you have to write some css

.THIS .slds-theme_backgroundColor-lightblue {
    background-color: lightblue;
}

and add this class to your container div

<aura:component>
   <div class="slds-box slds-theme_default slds-theme_backgroundColor-lightblue">
         //your component content
   </div>
</aura:component>
Related Topic