Section background for modern pages finally rolls out to target release


Section background color functionality is now finally available in targeted release but with some issues :( like some oob webparts still have white color in background. #sharepoint #office365

As you can see here , the page property webpart doesnt fit well with section background color 



But finally page looks must more better than before.



12 Replies
Excited for this release but still waiting!
Will Out of box webparts having white background currently , will match with Section background Color in future ?

ControlZoneEmphasisBackground root-87 adds white border to some OOB and all Custom SPFX webparts. Thus making the page look ugly. See the other image , when you remove the css you see that it takes row section color


I am currently not a fan of this feature the way it is now, it could be better if there was a 5th option when selecting a section background color that had "none". Currently I am using a classic theme with a modified palette and this new feature is forcing me to use 1 of 4 of the colors and ruining the aesthetics of my home page. The sections did not have a background prior to this release and that is the way we want it, now we are forced to use one, there is no other option. Shoving a section background down our throats, it would be nice to have a "transparent" or "none" option. Thank you. 

This is a feature only for Modern Pages, so I am not sure how a Classic Theme could affect it.


The first option is white, which is also the default background color for Modern Pages. If you do nothing your Modern Pages should still be usable and readable with a white background.

Have tested this with a simple section on modern page, looks ugly when you apply this beneath other sections without background color stretching the full page width.

There is also a css bug which you need to resolve with below css (to remove container background when you use a webpart on the page) .ControlZoneEmphasisBackground {background-color:transparent}


I'm not sure either, and yet it is effecting my site design while using a classic theme. With the options for the classic themes there are a few that have a transparent overlay showing your image in the background, then the page sections are added on top. I attached some images of what our current theme is supposed to look like (nice lighthouse image in the background) vs. what it looks like now with the opaque section backgrounds spanning across the entire section to where you can no longer see the nice image, and the transparent b/g overlay feature is no longer visible... 




I actually found an example of what the home page used to look like prior to this change. This is from back in June so all the links are changed now, but you can see the way the background looks with the lighthouse image showing, this is using the "quick links" web parts, those have not changed their placement at all on the home page... 




currently it is a little bit annoying that Microsoft missed to fix that.

But if you need  a hotfix you take a look here (my Blog)


or use 


  background-color: rgba(0, 0, 0, 0) !important;  

in your css / *.scss file of your custom Spfx WebPart





I have the same issue as@Roseanne Jones with the web parts, not possible to see the background image.

Does anyone have any update in relation to this?



When can we expect the page footer functionality ?@Harsh Damania 

@Roseanne Joneshow did you achieve the background image ? Is this Online ?