Forum Discussion
SharePoint modern pages - removing the shading from banner images
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:
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!
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!
- 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.
Thanks Susan, some of our business areas have done just that as the shading 'ruined' the clean sharp graphic in the banner.
- 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?
ThanksThe image we used was 1536 x 238 and yes, it works on mobile. I tested it on both Chrome and IE.
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.
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
- AFAIK, this shadow cannot be removed and customization options are limited to what you can get by means of custom themes in SPO
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.
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
- Hello your solution dose not remove the gray area covering the images of the carousel web part.
Leland Usher Solution given by cSesti does not remove gradient or image from news carousel web part.
It remove complete page header/image section from news/site pages itself, similar to this: SharePoint Online: Create a blank page without header & title
Please consider giving Like if my post helped you in any way. For SharePoint/Power Platform blogs, visit: Ganesh Sanap Blogs
AndrewWarland Go to 'Edit web part' on the image and on the right window that pops up, switch off 'Show background gradient':
- 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
Here's a screenshot of that which I'm talking about...
AndrewWarland Just to be sure are we talking about this component? I would love to be able to remove it:
Thank you
~B
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.
AndrewWarland 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
- Hey guys,
I created a tutorial on removing the Carousel web-part shading via CSS.
https://techcommunity.microsoft.com/t5/sharepoint/shading-in-news-web-part/m-p/3945810/highlight/true#M75315
Please see to perform yourself.
