XF 2.2 Add background to div.message-cell.message-cell--user

Try to add a background image (.gif) to the cell to the left of a post like this one below (my old VB site.)
avback.JPG

I know it's div.message-cell.message-cell--user but am unsure of what to add to extra.less. I need it to anchor to the bottom left of the cell. Any help is appreciated. This is the Xen inspect data.
avback2.JPG
 
Solution
Add this to extra.less and replace the URL with the one for your image

CSS:
.message-cell.message-cell--user {
    background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.Xf0md4XCdS4tKtzBrJEbkQAAAA%26pid%3DApi&f=1);
    background-repeat: no-repeat;
    background-position: left bottom;
}

1657820183516.png

RobinHood

Well-known member
Add this to extra.less and replace the URL with the one for your image

CSS:
.message-cell.message-cell--user {
    background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.Xf0md4XCdS4tKtzBrJEbkQAAAA%26pid%3DApi&f=1);
    background-repeat: no-repeat;
    background-position: left bottom;
}

1657820183516.png
 
Solution
Thanks for the fast and correct reply, works great.
Is there a way to change the width of .message-cell.message-cell?
What if I wanted to put one image above another? Is it best to join them with photo shop or can that be done in css?

Top image:
postinfo.gif


Lower image:
postinfo1.gif
 

RobinHood

Well-known member
I'd use one file. Here it is combined. The jpg is considerably smaller, so I'd use that one.

For the user info block I believe it's Appearance -> Style Properties -> Messages -> User section -> Message user info block width
 

Attachments

  • jeep-background-small.jpg
    jeep-background-small.jpg
    7.7 KB · Views: 3
  • jeep-background.png
    jeep-background.png
    66.1 KB · Views: 3
Top