SharePoint modern pages - removing the shading from banner images

[Andrew Warland]

We have distinct branding requirements and found that banner images are shading out our colors. 

The two images below are not ours, but show what happens to ANY image used as a banner. Is there a way to remove the shading? It only appears when the 'Image and Title' layout is selected.  

Original:

When added to the banner:

[#2]

AFAIK, this shadow cannot be removed and customization options are limited to what you can get by means of custom themes in SPO

[#3 · Accepted solution]

We noticed the same thing and came up with a work-around that might help you. We sized the image to work as a banner and then added it to a full width image web part on the top of the page. No shading and same outcome!

[#4]

Thanks Susan, some of our business areas have done just that as the shading 'ruined' the clean sharp graphic in the banner. 

[#5]

The Shading is probably just to enable the text which is usually white to cut through the image. 

I like Susan's work around for that. 

[#6]

I’ve been trying to get rid of that gray box over my banner image all day!!
Susan, what was the banner size you used in the image web part? Did you also check that the image banner web part renders correctly across all devices/browsers as to responsive page design?
Thanks

[#7]

The image we used was 1536 x 238 and yes, it works on mobile. I tested it on both Chrome and IE.

[#8]

quick question. 

Is there anywhere that Microsoft have published any image guidelines for  suggested sizes and resolutions for different web parts?

I have not seen any out there. 

[#9]

Try this: https://support.office.com/en-us/article/image-sizing-and-scaling-in-sharepoint-modern-pages-dc51006...

[#10]

Thanks Susan. 

I thought you would know. Much appreciated.

[#11]

Hello@Susan_Hanley 

I've been designing my companies' SharePoint pages and that dreaded shadow is the worst! I tried your method and it looks great. Does yours still have a bit of a white area where the regular banner would be? (Above my teal color banner)

[#12]

Any word on if Microsoft is planning to remove the shading? We also have strict branding requirements and the shading makes our bright yellow look like a dirty gold.

[#13]

The shading isn't there if you use the overlap option on the layout of the title area.

Rob
Los Gallardos
Microsoft Power Automate Community Super User

[#14]

Until there's an OOB solution, I used the below and it works although when connecting to PnPOnline, use 

"Connect-PnPOnline -Url https://mysite.sharepoint.com/sites/Site -UseWebLogin"

https://www.c-sharpcorner.com/blogs/remove-header-image-banner-from-sharepoint-modern-pages

[#15]

@Andrew Warland Just to be sure are we talking about this component? I would love to be able to remove it:

Thank you

~B

[#16]

@Boyan2165 no, the original discussion was about the banner image. I don't know if that option can be removed or hidden (e.g., for visitors in particular), but the options are reduced depending on what permissions you have. 

[#17]

@Andrew Warland Got it - yes the banner is easy to remove, I figured that out. Well if any more simplification has come to light since July let us know! Would love to get rid of the other "little banner" as well. Thank you

[#18]

We have the same problem. I'm convinced its the Call to Action. I removed the Call to Action and we retained our beautiful image. However I'm not able to correct this on the News web part for the Carousel layout. Still searching for a resolution or work around for that. Thanks for sharing.

[#19]

@Andrew Warland Go to 'Edit web part' on the image and on the right window that pops up, switch off 'Show background gradient':

[#20]

These instructions aren't working for me. I don't see a 'Show background gradient' when I edit the web part, which is an image in the Hero template. Is there an update to these instructions? Thank you so much. Kyla