Resource icon

Adding an image to your Post background

Lisa

Well-known member
Azhria Lilu submitted a new resource:

Adding an image to your Post background (version 1) - As it says on the tin

View attachment 41504
To add a background image to your posts, open your extra.css and add the following:-

Code:
.messageList .message {
  background-image:url(http://bookloversforum.com/styles/blf/xenforo/misc/postwater.png) !important;
  background-position:100% 90%  !important;
  background-repeat:no-repeat no-repeat !important;
}

Url will match your own site obviously. Background-position may need adjusting dependant on image size and where on the post you want the image to...

Read more about this resource...
 
Try adding .messageContent replacing it and taking out Messagelist. Haven't tested it so unsure that will work.
Thanks it worked :)

Code:
.message .messageContent {
  background-image:url(http://bookloversforum.com/styles/blf/xenforo/misc/postwater.png) !important;
  background-position:100% 90%  !important;
  background-repeat:no-repeat no-repeat !important;
}
 
Thanks it worked :)

Code:
.message .messageContent {
  background-image:url(http://bookloversforum.com/styles/blf/xenforo/misc/postwater.png) !important;
  background-position:100% 90%  !important;
  background-repeat:no-repeat no-repeat !important;
}
Just make sure to upload your own image, since you may find it annoying when i replace the one in the code with something less friendly :D
 
Question: does the post area have to be fixed or does this adjust down for responsive styles?

I'm pretty sure it will adjust since it's using percentages for fixed widths. As for responsive add-on (if i read correctly) if it suffers adverse effects add it to the stuff you want to hide when responsive kicks in. which you can do via extra.css.
 
Last edited:
Just make sure to upload your own image, since you may find it annoying when i replace the one in the code with something less friendly :D
Here is what I am using. Found the clipart on the web and since I'm learning to use Gimp got to playing with it. Anyone that wants to use it you can pull it (and I mean download it, not use it as your source file) from http://twowheeldemon.com/images/pen.gif or just drag the image to your desktop from the message.
pen.gif


This is what it looks like
mod1.jpg


Using this code
Code:
.messageList .messageContent {
  background-image:url(images/pen.gif) !important;
  background-position:100% 90%  !important;
  background-repeat:no-repeat no-repeat !important;
}
 
Last edited:
Hi, can this addition be used for specific user groups? Like giving VIPs a specific posting Background but no one else?
 
Hey guys, this modification is awesome! Thanks for it. But can anyone please add function for groups? That mean, for example for staff i want use one picture, for donators other picture and normal users nothing.
 
Hey guys, this modification is awesome! Thanks for it. But can anyone please add function for groups? That mean, for example for staff i want use one picture, for donators other picture and normal users nothing.
That's way beyond my abilities, I'm afraid :) I'm no coder, I just tweak css occasionally.
 
Top Bottom