Overlaying an avatar on the cover

Is it possible to overlay an avatar on a banner in a similar way? If yes, then at the same time you need to disable the ability to hide the banner

Can you try this CSS? To be inserted in your theme or a new component CSS.

.user-main:has(.has-background .user-profile-image) {
    $avatar_size: 144px;
    $avatar_margin: 20px;
    $avatar_border_size: medium;
    .user-profile-avatar {
        position: absolute;
        top: calc(-#{$avatar_size} / 2 - $avatar_margin);
        left: $avatar_margin; 
        img.avatar {
            background: var(--secondary);
            border-width: $avatar_border_size;
    .primary-textual {
        margin-left: calc($avatar_size + $avatar_margin * 2);

What is your theme? It might need some adjustments.

FKB Pro theme.
How can I add or change css here?

The recommended way is to create a new component, attach it to your theme, then you can Edit CSS/HTML there. :+1:




Ty! It’s working

But if the cover is hidden, the avatar will not be displayed either. How can I disable the ability to hide the cover?

I’ve updated the CSS above, can you try again?

It looks good on my side now:


This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.