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?