0

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? Yellow part has different background color

Improve this question
2
  • Your footer is supposed to be in the body of your component.
    – Martin Lezer
    Jun 9, 2017 at 8:22
  • @MartinLezer Thanks but changing this doesnt solve the problem. <body> <div class="custom-background"> <c:Partners_Header stepnumber="{!v.stepnumber}" header="{!v.header}"/> .... </div> <c:Partners_Footer/> </div> </body>
    – Ant12345
    Jun 9, 2017 at 9:29

3 Answers 3

Reset to default
1

Save a CSS file.

html{
background: white;
}

Upload CSS file in the Static resource with any name(let say ChangeBGColor)

Import the CSS in your parent lightning component using 

< ltng:require styles="{!$Resource.ChangeBGColor}" />
Improve this answer
1

It will be helpful if you can share the code.

From the screen shot I can guess following two ways this issue can occur -

  1. Looking from the screen shot it seems that in footer component there is a style of margin or padding written in which is responsible for the gray area
  2. There is a work around - apply a class to body and then write CSS on that

For ex - In Component definition - <body class="bgColor"></body>

In Style - .THIS.bgColor{background-color:red!important;} Note - Mark this as important

Check this once Let me know if this works for you.

Improve this answer
0

You can also simply put this in the component to change its background color:

<aura:html tag="style">
    html {
        background-color: white;
    }
</aura:html>
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .