SharePoint Online - Modern Site, Can you add a custom Background Image behind Webparts

Question

I am looking for some assistance - I currently have a request from the CEO to create a custom SharePoint site, which will be used to embed a Microsoft Stream video, however he wants the site to be pretty bare and only consist of a background picture and a header.

I so far have the site ready, with the exception of a background image behind the video, I have been researching and all I can work out is that for Modern SharePoint sites you have to use SPFx with a custom.css file: https://www.sharepointdiary.com/2020/09/sharepoint-online-inject-custom-css-to-modern-sites.html

I tried following the above, I have the .css file with the following script:

<style>
.s4-workspace
{
background-image:url('../Style Library/backgroundDefault.jpg');
background-repeat:no-repeat;
  background-attachment: fixed;
  background-position: center;
}
</style>

I can see when running Get-PnPCustomAction | Where { $_.Name -eq "InjectCssApplicationCustomizer"} that the command has been accepted, however the page just remains the same with no custom background picture.

Is anyone able to tell where I am going wrong or point me in the right direction?

Answer 1

You can use the following CSS to set the background:

div[data-automation-id='CanvasZone']{
   background-image: url("https://images.pexels.com/photos/6920117/pexels-photo-6920117.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260&") !important;
}