SOLVED

SharePoint modern pages - removing the shading from banner images

%3CLINGO-SUB%20id%3D%22lingo-sub-307876%22%20slang%3D%22en-US%22%3ESharePoint%20modern%20pages%20-%20removing%20the%20shading%20from%20banner%20images%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-307876%22%20slang%3D%22en-US%22%3E%3CP%3EWe%20have%20distinct%20branding%20requirements%20and%20found%20that%20banner%20images%20are%20shading%20out%20our%20colors.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20two%20images%20below%20are%20not%20ours%2C%20but%20show%20what%20happens%20to%20ANY%20image%20used%20as%20a%20banner.%20Is%20there%20a%20way%20to%20remove%20the%20shading%3F%20It%20only%20appears%20when%20the%20'Image%20and%20Title'%20layout%20is%20selected.%26nbsp%3B%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EOriginal%3A%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20414px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F64476i73BD492E00FCDC06%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22BannerShading1.PNG%22%20title%3D%22BannerShading1.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EWhen%20added%20to%20the%20banner%3A%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20415px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F64477iBD56675272C78BD9%2Fimage-dimensions%2F415x120%3Fv%3D1.0%22%20width%3D%22415%22%20height%3D%22120%22%20alt%3D%22BannerShading2.PNG%22%20title%3D%22BannerShading2.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-307876%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-310087%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20modern%20pages%20-%20removing%20the%20shading%20from%20banner%20images%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-310087%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%20Susan.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20thought%20you%20would%20know.%20Much%20appreciated.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-309938%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20modern%20pages%20-%20removing%20the%20shading%20from%20banner%20images%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-309938%22%20slang%3D%22en-US%22%3E%3CP%3ETry%20this%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fsupport.office.com%2Fen-us%2Farticle%2Fimage-sizing-and-scaling-in-sharepoint-modern-pages-dc510065-b5a5-4654-bc94-e3ecbbb57d8d%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fsupport.office.com%2Fen-us%2Farticle%2Fimage-sizing-and-scaling-in-sharepoint-modern-pages-dc510065-b5a5-4654-bc94-e3ecbbb57d8d%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-309902%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20modern%20pages%20-%20removing%20the%20shading%20from%20banner%20images%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-309902%22%20slang%3D%22en-US%22%3E%3CP%3Equick%20question.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIs%20there%20anywhere%20that%20Microsoft%20have%20published%20any%20image%20guidelines%20for%26nbsp%3B%20suggested%20sizes%20and%20resolutions%20for%20different%20web%20parts%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20not%20seen%20any%20out%20there.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-309862%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20modern%20pages%20-%20removing%20the%20shading%20from%20banner%20images%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-309862%22%20slang%3D%22en-US%22%3E%3CP%3EThe%20image%20we%20used%20was%201536%20x%20238%20and%20yes%2C%20it%20works%20on%20mobile.%20I%20tested%20it%20on%20both%20Chrome%20and%20IE.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-309625%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20modern%20pages%20-%20removing%20the%20shading%20from%20banner%20images%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-309625%22%20slang%3D%22en-US%22%3EI%E2%80%99ve%20been%20trying%20to%20get%20rid%20of%20that%20gray%20box%20over%20my%20banner%20image%20all%20day!!%3CBR%20%2F%3ESusan%2C%20what%20was%20the%20banner%20size%20you%20used%20in%20the%20image%20web%20part%3F%20Did%20you%20also%20check%20that%20the%20image%20banner%20web%20part%20renders%20correctly%20across%20all%20devices%2Fbrowsers%20as%20to%20responsive%20page%20design%3F%3CBR%20%2F%3EThanks%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-308326%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20modern%20pages%20-%20removing%20the%20shading%20from%20banner%20images%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-308326%22%20slang%3D%22en-US%22%3E%3CP%3EThe%20Shading%20is%20probably%20just%20to%20enable%20the%20text%20which%20is%20usually%20white%20to%20cut%20through%20the%20image.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20like%20Susan's%20work%20around%20for%20that.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-308170%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20modern%20pages%20-%20removing%20the%20shading%20from%20banner%20images%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-308170%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%20Susan%2C%20some%20of%20our%20business%20areas%20have%20done%20just%20that%20as%20the%20shading%20'ruined'%20the%20clean%20sharp%20graphic%20in%20the%20banner.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-307980%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20modern%20pages%20-%20removing%20the%20shading%20from%20banner%20images%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-307980%22%20slang%3D%22en-US%22%3E%3CP%3EWe%20noticed%20the%20same%20thing%20and%20came%20up%20with%20a%20work-around%20that%20might%20help%20you.%20We%20sized%20the%20image%20to%20work%20as%20a%20banner%20and%20then%20added%20it%20to%20a%20full%20width%20image%20web%20part%26nbsp%3Bon%20the%20top%20of%20the%20page.%20No%20shading%20and%20same%20outcome!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-307894%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20modern%20pages%20-%20removing%20the%20shading%20from%20banner%20images%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-307894%22%20slang%3D%22en-US%22%3EAFAIK%2C%20this%20shadow%20cannot%20be%20removed%20and%20customization%20options%20are%20limited%20to%20what%20you%20can%20get%20by%20means%20of%20custom%20themes%20in%20SPO%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-658035%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20modern%20pages%20-%20removing%20the%20shading%20from%20banner%20images%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-658035%22%20slang%3D%22en-US%22%3E%3CP%3EHello%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F149%22%20target%3D%22_blank%22%3E%40Susan%20Hanley%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI've%20been%20designing%20my%20companies'%20SharePoint%20pages%20and%20that%20dreaded%20shadow%20is%20the%20worst!%20I%20tried%20your%20method%20and%20it%20looks%20great.%20Does%20yours%20still%20have%20a%20bit%20of%20a%20white%20area%20where%20the%20regular%20banner%20would%20be%3F%20(Above%20my%20teal%20color%20banner)%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F116572i8A802A0D648A8A0F%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22bannersolution.JPG%22%20title%3D%22bannersolution.JPG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1061240%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20modern%20pages%20-%20removing%20the%20shading%20from%20banner%20images%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1061240%22%20slang%3D%22en-US%22%3E%3CP%3EAny%20word%20on%20if%20Microsoft%20is%20planning%20to%20remove%20the%20shading%3F%20We%20also%20have%20strict%20branding%20requirements%20and%20the%20shading%20makes%20our%20bright%20yellow%20look%20like%20a%20dirty%20gold.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1061304%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20modern%20pages%20-%20removing%20the%20shading%20from%20banner%20images%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1061304%22%20slang%3D%22en-US%22%3E%3CP%3EThe%20shading%20isn't%20there%20if%20you%20use%20the%20%3CEM%3Eoverlap%3C%2FEM%3E%20option%20on%20the%20layout%20of%20the%20title%20area.%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F161189i56965EFD56E672E0%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22overlap.png%22%20title%3D%22overlap.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERob%3CBR%20%2F%3ELos%20Gallardos%3CBR%20%2F%3EMicrosoft%20Power%20Automate%20Community%20Super%20User%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1066963%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20modern%20pages%20-%20removing%20the%20shading%20from%20banner%20images%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1066963%22%20slang%3D%22en-US%22%3E%3CP%3EUntil%20there's%20an%20OOB%20solution%2C%20I%20used%20the%20below%20and%20it%20works%20although%20when%20connecting%20to%20PnPOnline%2C%20use%26nbsp%3B%3C%2FP%3E%3CP%3E%22Connect-PnPOnline%20-Url%20%3CA%20href%3D%22https%3A%2F%2Fmysite.sharepoint.com%2Fsites%2FSite%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fmysite.sharepoint.com%2Fsites%2FSite%3C%2FA%3E%20-UseWebLogin%22%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fwww.c-sharpcorner.com%2Fblogs%2Fremove-header-image-banner-from-sharepoint-modern-pages%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fwww.c-sharpcorner.com%2Fblogs%2Fremove-header-image-banner-from-sharepoint-modern-pages%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1504956%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20modern%20pages%20-%20removing%20the%20shading%20from%20banner%20images%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1504956%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F4163%22%20target%3D%22_blank%22%3E%40Andrew%20Warland%3C%2FA%3E%26nbsp%3BJust%20to%20be%20sure%20are%20we%20talking%20about%20this%20component%3F%20I%20would%20love%20to%20be%20able%20to%20remove%20it%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Boyan2165_0-1594012565771.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F203436i28B8A6B4B47E26DC%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22Boyan2165_0-1594012565771.png%22%20alt%3D%22Boyan2165_0-1594012565771.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EThank%20you%3C%2FP%3E%3CP%3E~B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1507511%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20modern%20pages%20-%20removing%20the%20shading%20from%20banner%20images%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1507511%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F690272%22%20target%3D%22_blank%22%3E%40Boyan2165%3C%2FA%3E%26nbsp%3Bno%2C%20the%20original%20discussion%20was%20about%20the%20banner%20image.%20I%20don't%20know%20if%20that%20option%20can%20be%20removed%20or%20hidden%20(e.g.%2C%20for%20visitors%20in%20particular)%2C%20but%20the%20options%20are%20reduced%20depending%20on%20what%20permissions%20you%20have.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Regular Contributor

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:

BannerShading1.PNG

When added to the banner:

BannerShading2.PNG

 

15 Replies
Highlighted
AFAIK, this shadow cannot be removed and customization options are limited to what you can get by means of custom themes in SPO
Highlighted
Best Response confirmed by Kevin Crossman (MVP)
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!

Highlighted

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

Highlighted

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. 

 

Highlighted
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
Highlighted

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

Highlighted

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. 

Thanks Susan. 

 

I thought you would know. Much appreciated.

Highlighted

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)

bannersolution.JPG

Highlighted

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.

Highlighted

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

overlap.png

 

Rob
Los Gallardos
Microsoft Power Automate Community Super User

Highlighted

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

 

 

Highlighted

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

 

Boyan2165_0-1594012565771.png

Thank you

~B

Highlighted

@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.