XF 2.3 How to use an image with variations as a background image

[Ozzy47]

So following this thread, https://xenforo.com/community/threa...ns-as-a-background-image.226257/#post-1713256

I have my less like described here, https://xenforo.com/community/threads/custom-prefixes.222693/#post-1688837

But when I try to save I get the error "Syntax error - Template modifications: public:extra.less"

.fr-box.fr-basic .fr-element:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url({$xf.style.getPropertyVariation('publicLogoUrl', 'default'}) no-repeat bottom right;
 
    .m-colorScheme(dark {
        background: url({$xf.style.getPropertyVariation('publicLogoUrl', 'alternate'}) no-repeat bottom right;
    });
    background-size: 300px; /* Adjust size as needed */
    opacity: 0.2; /* Set opacity to 20% or whatever you prefer */
    pointer-events: none; /* Make it non-interactive */
    z-index: -1; /* Ensure it appears behind the text content */
}

 

[kick]

missing , after dark

 

[Ozzy47]

Unfortunately I still get the same error.

 

[kick]

missing ). Replace with this:

    .m-colorScheme(dark, {
        background: url({$xf.style.getPropertyVariation('publicLogoUrl', 'alternate')}) no-repeat bottom right;
    });

 

[Ozzy47]

Thank you, I had to do the same for the first bit as well. here is the final code:

    background: url({$xf.style.getPropertyVariation('ozzmodz_logo_editor_img', 'default')}) no-repeat bottom right;
 
    .m-colorScheme(dark, {
        background: url({$xf.style.getPropertyVariation('ozzmodz_logo_editor_img', 'alternate')}) no-repeat bottom right;
    });