Forum Discussion
AndrewWarland
Jan 02, 2019Steel Contributor
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!
- afrangopoulosmacroCopper ContributorHey 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. - CandiceEGrahamCopper Contributor
AndrewWarland Go to 'Edit web part' on the image and on the right window that pops up, switch off 'Show background gradient':
- Leland UsherBrass Contributor
- KylaAtTheLibraryCopper ContributorThese 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
- KylaAtTheLibraryCopper Contributor
Here's a screenshot of that which I'm talking about...
- Boyan2165Copper Contributor
AndrewWarland Just to be sure are we talking about this component? I would love to be able to remove it:
Thank you
~B
- AndrewWarlandSteel Contributor
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.
- Boyan2165Copper Contributor
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
- cSestiCopper Contributor
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
- Leland UsherBrass ContributorHello 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
- bioterCopper Contributor
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.
- RobElliottSilver Contributor
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
- Philip WorrellSteel Contributor
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.
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!
- Leland UsherBrass Contributor
Susan_Hanley Please see the attached image. Can you think of any way to remove this dreadful gradient from our news carousel as placed on our homepage? Thanks
- Unfortunately, there is no way to do that in this context without something custom. If you want my snarky answer, it would be to not use a carousel for important news in the first place! Carousels do not test very well for usability and are generally not recommended from an accessibility perspective. You may want to consider a web part view for news that shows users all the content without having to wait or work for them to appear. I understand not wanting the gradient, but I guess I am asking whether you may want to do some re-thinking first. It’s not that I don’t use them ever, but you may want to look at https://shouldiuseacarousel.com/ for a fun way to learn more.
- harriscontractorCopper ContributorWe 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.
- FaithbCopper Contributor
HelloSusan_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)
- AFAIK, this shadow cannot be removed and customization options are limited to what you can get by means of custom themes in SPO