I selected the "Wood" theme for a SharePoint site created in SharePoint Online, and noticed that the backgrounds that appear to be transparent in the preview are actually opaque.

Here is the preview. Note the transparent backgrounds on the side menu and main content, and partially transparent top menu:


Now, after selecting the theme and navigating to the main page, I see the following. Observe that the side menu, top bar, and background of the news section are opaque, when I would expect them to be transparent or translucent based on the preview:

Opaque Background

Interestingly, the backgrounds appear correct when I navigate to the Site Settings page:

Site Settings

I've tried this in both Chrome and Edge, and have also tried other themes that use transparent backgrounds. The effect is the same on all of them. Any ideas on how to resolve this?


The background Image will only work correctly in the Classic pages (e.g. site setting). These type of themes weren't designed for modern sites which is responsive.

Although, we use Classic 'Look and Feel',but there are limitation. Have a look at this article which talks about limitations. Also, this one. Although this article doesn't talk about background image but you can see from the screenshot provided the left Navigation is still not transparent.

If you check the CSS through the Developer tool you will see background-color is explicitly being used, hence no transparency.

Here is a very good article here about Site Design/Themes for the Modern site which might be helpful.


You can customize your master page.

In that custom css file add transparency setting for needed class. More information:


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.