XF2 Tutorials User Message Background

[JowLix]

Add to extra.lesstemplate

.msgBgByName (@msgBgAuthorName; @msgBgUrl; @msgBgSize; @msgBgPosition: false) {
 
  .message[data-author="@{msgBgAuthorName}"] .message-inner {
    background-image: linear-gradient(to top, @xf-contentBg, fade(@xf-contentBg, 60%)), url(@msgBgUrl);
  background-position: @msgBgPosition;
  background-size: @msgBgSize;
}
.message[data-author="@{msgBgAuthorName}"] .message-cell.message-cell--user {
   background: transparent;
}
}
// Example
.msgBgByName (Pepelniy; 'https://i.imgur.com/W1yqxKS.jpg'; cover; left);

Spoiler: Option with User ID

First, create a template modification

Template: post_macros
Modification key: messageAuthorId
Find:

data-author="{{ $post.User.username ?: $post.username }}"

Replace:

$0
data-author-id="{{ $post.User.user_id ?: 0}}"

Then add the code below to extra.less

.msgBgById (@msgBgAuthorId; @msgBgUrl; @msgBgSize; @msgBgPosition: false) {

.message[data-author-id="@{msgBgAuthorId}"] .message-inner {
background-image: linear-gradient(to top, @xf-contentBg, fade(@xf-contentBg, 60%)), url(@msgBgUrl);
background-position: @msgBgPosition;
background-size: @msgBgSize;
}
.message[data-author-id="@{msgBgAuthorId}"] .message-cell.message-cell--user {
background: transparent;
}
}
// Example
.msgBgById (1; 'https://i.imgur.com/W1yqxKS.jpg'; cover; left);