• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Adding an image to your Post background

Lisa

Well-known member
#1
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...
 

Veer

Well-known member
#4
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;
}
 

Lisa

Well-known member
#5
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
 

Shelley

Well-known member
#8
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:

Tracy Perry

Well-known member
#10
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.


This is what it looks like


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:
#18
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.
 

Lisa

Well-known member
#19
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.