# Sovrapporre un avatar sulla copertina

**URL:** <https://meta.discourse.org/t/overlaying-an-avatar-on-the-cover/292808>\
**Category:** Development\
**Created:** [24 Gennaio 2024, 5:53pm UTC](https://meta.discourse.org/t/overlaying-an-avatar-on-the-cover/292808 "2024-01-24T17:53:51Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [24 Gennaio 2024, 6:47pm UTC](https://meta.discourse.org/t/overlaying-an-avatar-on-the-cover/292808/2 "2024-01-24T18:47:42Z")

</div>

Puoi provare questo CSS? Da inserire nel tuo tema o in un nuovo CSS di componente.

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

```

Qual è il tuo tema? Potrebbe necessitare di alcuni aggiustamenti.

---

_[View the full topic](https://meta.discourse.org/t/overlaying-an-avatar-on-the-cover/292808)._