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

[Kirby]

I might be missing smth, but it seems like I am unable to figure out how to use an image with variations (like publicLogoUrl) as a background image.

Smth. like

#myid
{
    background-image: url({$xf.style.getPropertyVariation('publicLogoUrl', 'default'});
   
    .m-colorScheme(dark {
        background-image: url({$xf.style.getPropertyVariation('publicLogoUrl', 'alternate'});
    });
}

might work, but that seems pretty complicated (and kinda inefficient) - there must be a simpler way to do this?

 

[Paul B]

That is the way to do it.

XF 2.3 Post in thread 'Custom prefixes'

Jul 1, 2024

You'll typically want to use the .m-colorScheme mixin to target color schemes (light/dark):

.some-class
{
    // normal rules (default color scheme -- light in the default style)

    .m-colorScheme({{ $xf.style.getAlternateStyleType() }},
    {
        // alternate rules (alternate color scheme -- dark in the default style)
    });
}

However you can target specific variations if you want:

.some-class
{
    // normal rules (system or implicit default variation)

    :root[data-variation="alternate"] &
    {
        // alternate rules (explicit alternate variation -- will...

• Jeremy P

• 
• 

 

[Kirby]

Thanks Paul.

So if I understand this right, the answer to my question "there must be a simpler way to do this?" is No?

 

[Ozzy47]

So I'm having trouble with this. Here is my less code.

.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 */
}

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

 

[Ozzy47]

So this ended up being the correct way to acheive it:

    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;
    });