How to resize homepage banner image

Question

My scenario : Preety simple case where i have a banner image at the top of the page and trying to resize the image to fill the left and right section instead of the default white space. I have been able to resize the image using static width size but when i try to use width:100% it doesn't work. Right now i cannot make my image responsive.

I am using a modern team site.

Answer 1

To customize the banner image in a modern page, you can download and deploy the react script editor web part to the site, and add react script editor web part to the modern page, then add the CSS code into this web part to adjust(resize) the spaces. Do the following steps:

1. Add The Script Editor Webpart back to SharePoint Modern Experience:

https://medium.com/niftit-sharepoint-blog/add-the-script-editor-webpart-back-to-sharepoint-modern-experience-688a7b7208e4

2. Add below CSS script into the Script Editor Webpart to resize your image(you need to use F12 to find the ID of your banner image):

   {

       height:60px !important;
       width:100px !important;
   

   }