I just tried signing out and its still the same lemme go open it on my phone

It's clearly an issue on your side.

It works for me after you fixed the CSS.

What browser are you using?

it's working on my phone so clearly my device just isn't clearing its cache properly. I'll figure out how to fix that but that's all I needed thx for the help.

Im on chrome but ive pressed ctrl shift R many times

Check if your browser is up-to-date.

:has() is relatively new (2023)

https://caniuse.com/css-has

Otherwise try clear all cache and website-data and restart the browser.

I found the issue so i do most of my coding on an old chromebook which was released in 2012 and chromebooks receive updates for 10 years then stop meaning mine stopped updating in 2022 so :has() does not work. Ill just switch to my newer pc lol

Just a quick update in case anyone wants to use this in the future I found that if you change fixed to absolute in the CSS it will automatically take the shape of the page__main without any need to modify anything.

In case someone comes back to this post for the same question. this is what we came up with in the end:

CSS:

.oc-page-bg {
  position: fixed;
  top:  0;
  left: 0;
  overflow: visible;
  z-index: -1;
  height: 100%;
  width:  100%;
}
.page__main:has(.oc-page-bg) {
  background: transparent;
}

Template:

<div class="oc-page-bg" style="background:{{{1|{{{bg|initial}}}}}};"></div>

Usage:

{{<Insert Template name>|Blue}}

"if you change fixed to absolute it will take the shape of the page__main"

Now that's... interesting.

This means, you could actually make 2 templates, one for full site BG, and one for page__main BG.

Users could then use template 1, or template 2, or both.

Full page background:

.page__main backgorund:

Both:

CSS:

.custom-bg-site,.custom-bg-page {
  top:  0;
  left: 0;
  overflow: visible;
  height: 100%;
  width:  100%;
  z-index: -1;
}
.custom-bg-site { position: fixed; }
.custom-bg-page { position: absolute; }

.page__main:has(:is(.custom-bg-page,.custom-bg-site)) {
  background: transparent;
}

Full site bg is much easier since its an image