Resource icon

Adding an image to your Post background

Overview Reviews (3) Discussion
Lisa

Lisa

Well-known member
#1
#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...
Click to expand...
Read more about this resource...
 
V

Veer

Well-known member
#4
#4
Shelley said:
Try adding .messageContent replacing it and taking out Messagelist. Haven't tested it so unsure that will work.
Click to expand...
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

Lisa

Well-known member
#5
#5
Veer said:
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;
}
Click to expand...
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

Shelley

Well-known member
#8
#8
Jeff Fuqua said:
Question: does the post area have to be fixed or does this adjust down for responsive styles?
Click to expand...
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

Tracy Perry

Well-known member
#10
#10
Azhria Lilu said:
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
Click to expand...
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:
AscalonCZ

AscalonCZ

Member
#18
#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

Lisa

Well-known member
#19
#19
AscalonCZ said:
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.
Click to expand...
That's way beyond my abilities, I'm afraid :) I'm no coder, I just tweak css occasionally.
 
You must log in or register to reply here.
Top