Backgrounds in Posts

[Wormopolis]

Browser Tested: IE and FF
placement: global footer for all posts, or board footer for just a single board.

This code will allow you to put an image behind the text in a post. keep in mind that certain font colors dont look good when placed on a background of similar color.

I added in switches to control the background.
image repeating:
nr = no repeat
rx = repeat horiz only
ry = repeat vertically only

image position:
cx = center horiz
cy = center vertically
(you can use both together to put image in center of post)
by = bottom left
bx = top right
(you can use both to get to bottom right)

(combinations of image positions will get you anywhere)


simply type
[PBG:]URL OF IMAGE[/PBG:] into your post to add a background.

switches come right after [PBG: and before ]. like:
[PBG:nr,cx,cy]

seperate switches with commas. use lowercase for switches.

here is the code for global footer or board footer:


<script type="text/javascript">
<!--
// Background image in posts v1.6
// By Wormopolis - www.wormocodes.com
// do not repost - keep header intact

var entirePost=true;  //set true to make entire post including sig have background
var includeHRbar=false;  //if entirePost is false, do you want to include HR bar across the top?


// Dont edit below unless you know what you are doing

if (pb_action.match(/display|recent|search2/)) {
 if (location.href.match(/quote=/i)) {
   for (ma=document.getElementsByTagName('textarea'), mm=0; mm<ma.length; mm++) {
     if (ma[mm].name && ma[mm].name=='message' && ma[mm].value.match(/\[PBG:(.*?)\](.+?)\[\/PBG:\]/)) {
       ma[mm].value=ma[mm].value.replace(/\[PBG:(.*?)\](.+?)\[\/PBG:\]/,'')
     }
   }
 } else {
   for (tds=document.getElementsByTagName('td'), tt=0; tt<tds.length; tt++) {
     if (tds[tt].width=='20%' && tds[tt].className.match(/windowbg/) && tds[tt].vAlign=='top') {
       if (tds[tt].nextSibling && tds[tt].nextSibling.innerHTML.match(/\[PBG:(.*?)\](.+?)\[\/PBG:\]/) && !tds[tt].nextSibling.innerHTML.match(/\[norunubbc\]/)) {
         msgCell=tds[tt].nextSibling;
         msgContentTable= msgCell.firstChild;
         msgContent=msgContentTable.rows[1].cells[0];  msgContent.style.height="100%";
         if (msgContent.innerHTML.match(/\[PBG:(.*?)\](.+?)\[\/PBG:\]/)) {
           switches=RegExp.$1;
           keep=RegExp.$2;
           keep=(keep.replace(/\s/g,''));
           if (keep!='') msgContent.innerHTML=msgContent.innerHTML.replace(/\[PBG:(.*?)\](.+?)\[\/PBG:\]/,'');
         }
         if (!entirePost && !includeHRbar) {
           var nwpara=document.createElement('div'); nwpara.style.height='100%';
           while (msgContent.firstChild) {nwpara.appendChild(msgContent.firstChild); }
           msgContent.appendChild(nwpara.firstChild);
           msgContent.appendChild(nwpara);
         }
         if (entirePost) {
           msgContentTable.rows[1].cells[0].style.backgroundColor = "transparent";
           if (msgContentTable.rows[2]) msgContentTable.rows[2].cells[0].style.backgroundColor = "transparent";
         }
         var bgTarget=(entirePost ? msgContentTable : (includeHRbar ? msgContent : nwpara));
         bgTarget.style.backgroundImage='url("'+keep+'")';
         bgTarget.style.height='100%';
         if (switches!='') {
           // nr = no repeat
           // rx = repeat x only
           // ry = repeat y only
           // default image is top left
           // cx = center horizontally
           // cy = center vertically
           // by = bottom vertically
           // bx = right horizontally
           // maybe more in the future
           if (switches.match('nr')) bgTarget.style.backgroundRepeat='no-repeat';
           if (switches.match('rx')) bgTarget.style.backgroundRepeat='repeat-x';
           if (switches.match('ry')) bgTarget.style.backgroundRepeat='repeat-y';
           if (switches.match('cx')) bgTarget.style.backgroundPosition='top center';
           if (switches.match('cy')) bgTarget.style.backgroundPosition='middle left';
           if (switches.match('cx') && switches.match('cy')) bgTarget.style.backgroundPosition='middle center';
           if (switches.match('by')) bgTarget.style.backgroundPosition='bottom left';
           if (switches.match('bx')) bgTarget.style.backgroundPosition='top right';
           if (switches.match('bx') && switches.match('by')) bgTarget.style.backgroundPosition='bottom right';
           if (switches.match('bx') && switches.match('cy')) bgTarget.style.backgroundPosition='middle right';
           if (switches.match('cx') && switches.match('by')) bgTarget.style.backgroundPosition='bottom center';
         }
       }
     }
   }
 }
}

// -->
</script>



[norunubbc]
preview: try it yourself. its turned on in this board.

[Wormopolis]

[PBG:nr,cx,cy]http://www.files.li.ru/wp/space/space_028.jpg[/PBG:]

Its very easy to do. keep in mind that the image will onyl fill the available space. so if you have a large image, it wont stretch anything.

If you want the whole image to show you might have to add in some line feeds.

Otherwise it will just get cutoff.





Enjoy!

[ÐucK-§Ð]

sweet

[Mr. Moon]

[PBG:nr,cx,cy]http://ia.media-imdb.com/images/M/MV5BMTkwODA2MzgyMV5BMl5BanBnXkFtZTYwNTQ0Mzg3._V1._SX485_SY327_.jpg[/PBG:]

Haha.

Don't say it three times!

[Wormopolis]

I think he was trying to get an example to work.

you actually have to type the [PBG:]URLOFIMAGE[/PBG:] into your post.

[Mr. Moon]

Dec 29, 2008 5:31:12 GMT -8 Wormopolis said:

I think he was trying to get an example to work.

you actually have to type the into your post.

Who ya talkin' to?

[Wormopolis]

Im talkin to YOU... about the Duckman...

[Mr. Moon]

Mine did work.

It's not a duck. It's BEETLEJUICE. ;D

---

Oh, now I get what you mean. I was refering to Beetlejuice. Say it three times, he comes back, etc. ;D

[bunny]

[PBG:]http://www.pumastudios.nl/i_has_lolz/oudwijftrappengs3.gif[/PBG:]
omg

thats awesome +_+

=D

so can i just put this in global footer and it will work in all topics/forums?

[Wormopolis]

absolutely!

[xiØn]

Very nice.

[Wormopolis]

version update 1.21: new PB images have png extension so I updated the regex.

[cvekiboy]

[PBG:]http://i260.photobucket.com/albums/ii17/cvekiboy/spv/Other/background.png[/PBG:]

First of all hello to all and sry for grave-digging!
Me new here even Im old PB user.
Wormopolis helped a lot so far in past on PB support fora.

I have trouble so long time now and finally wanna solve it.
Here from previous post I see it works!

On my board the code that makes this magic wont work!

If u can look up why I would appreciate greatly.

Thank you.

Login out...

END

[Wormopolis]

you changed the ip image down in the bottom right corner of posts.

find this line

if (img.src.match(/ip\.(gif|png)/i)) {


change to

if (img.src.match(/logged\.(gif|png)/i)) {

[cvekiboy]

Life saviour!
Works like charm!

Thanks.

I scope around to implement some more wonderful work from u!

Login out...

END