Adding an image to your Post background

[Lisa]

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:-

.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]

Very nice!

How to move it above the signature line?

 

[Shelley]

Very nice!

How to move it above the signature line?

Try adding .messageContent replacing it and taking out Messagelist. Haven't tested it so unsure that will work.

 

[Veer]

Try adding .messageContent replacing it and taking out Messagelist. Haven't tested it so unsure that will work.

Thanks it worked

.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]

Thanks it worked

.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

 

[Jeff Fuqua]

Question: does the post area have to be fixed or does this adjust down for responsive styles?

 

[Lisa]

I don't have a responsive style installed, so I'm afraid I couldn't tell you.

 

[Shelley]

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.

 

[ip0dhacker]

Very nice template mod. Thank you

 

[TPerry]

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

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

.messageList .messageContent {
  background-image:url(images/pen.gif) !important;
  background-position:100% 90%  !important;
  background-repeat:no-repeat no-repeat !important;
}

 

[xIsabel38]

Hi, can this addition be used for specific user groups? Like giving VIPs a specific posting Background but no one else?

 

[Lisa]

It's not something I've attempted personally, so I couldn't say for sure.

 

[Mufasa]

It's not something I've attempted personally, so I couldn't say for sure.

Did you work this out? lol

 

[Lisa]

Did you work this out? lol

Was I supposed to?

 

[Mufasa]

No, was wondering if you did lol

 

[Lisa]

No, was wondering if you did lol

No since it was not something I needed

 

[Mufasa]

Ok, no worries, thanks

 

[AscalonNera]

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]

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.

 

[AscalonNera]

OK But maybe someone, who know how to do will help, please. Thank you all.