Can I have this apply to the Common.css for only certain pages then? If so how?

What the above response says.

You can use the body.xyz trick to address dark and light mode, but also only if addressing selectors inside mw-parser-output, e.g.

body.theme-fandomdesktop-dark .your-selector { ... }

.page__main is outside of mw-parser-output.

"Can I have this apply to the Common.css for only certain pages then?"

Yes:

.page-The_Sims_3_Supernatural .page__main {
  ...
}

@Oot42

Background and opacity still not working.

You override the background image with the background color that follows in your css. Without that:

Ok "!important;" fixed that ty!

You don't need "important" for what you did now.

If you want the full page (not only the content of the page) use the background, you can use .main-container instead of .page__main. Then you can have a transparent overlay on .page__main.

(I would not style the body, this may cause issues)

.page-The_Sims_3_Supernatural .main-container {
  background-image: url('https://static.wikia.nocookie.net/lir-test/images/a/a5/ATLAS_AppLoadingScreenEP7.png');    
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.page-The_Sims_3_Supernatural .page__main {
  background: rgba(32, 32, 32, 0.3);
}

It worked for the background but not the opacity.

The above css 100% works for both the full page background on .main-container and the opacity of the overlay on .page__main - and without using "important".

The reason it didn't do what you wanted was probably that it is overwritten furter down, on line 292 and 299.

You cannot define an opacity for the background-image property if that's what you mean.

Also, you really don't need to add those fallback rgb colors anymore. Browsers not supporting rgba are 12-15 and more years old. Such a browser would probably crash before even reaching your page, lol. ;)

Oh lol that was a copy paste from a site I just left and hadn't cleaned up yet LOL.

Hmm, not sure why it didn't work for me I'll try again.