How do I make this postbit alteration?

[troykp]

Hello,

I'm looking to add a background image to my postbit, as shown here (the black background):

https://vborg.vbsupport.ru/external/2011/02/15.png

Which HTML adjustments would I need to make in order to do this?

Much appreciated!

Edit: I tried adding a table to my postbit legacy and it merely disrupted the post area. I'm stumped. :p

[Lynne]

Have you tried adding it to stylevar "postbit_userinfo_background"?

[troykp]

Thanks for the response Lynne.

I tried that and I'm still having difficulties with the image; whilst I can now get an image in the background, it doesn't really work too well due to the different sizes of people's postbit user info panels.

Example: I have a favourite teams user profile field. It displays at the bottom of my postbit as images (very similar to the screenshot above). Some people use this field, some don't. As a result, they have different size postbits, which causes the background image to either be A) too short, or B) too long, and get cut off at the bottom.

The site in the screenshot I posted seem to have got round this error. Any ideas how? :)

[Lynne]

Can you post a link for us to see what you've done and the problems you see?

[troykp]

https://vborg.vbsupport.ru/external/2011/02/11.png https://vborg.vbsupport.ru/external/2011/02/12.png

^ As you can see, the results are vastly different. The first image cuts off short of the country flag, and sports teams, whilst the other comfortably contains it all. Avatar height, and the use/non-use of the favourite teams field means that I have different size postbits.

(ignore the odd looking images against the black background, I just put the black there to highlight what I mean)

The other forum I'm looking to follow the example of doesn't have that problem.

[Lynne]

It's really hard to tell what is going on without actual links. A link to the original site that has this working and a link to your site where it isn't working would allow us to see what is wrong.

[troykp]

http://www.wrestlingsmarks.com/ < - my site (although I've taken the background away so that the forum can still be used easily. All I'd done was add my image to postbit_userinfo_background).

http://wrestlingclique.com/ < - the site where they have this working properly.

Thanks for your assistance with this Lynne.

[Lynne]

That site actually does some other changes. They have one div for the whole userinfo. Then inside that, a top image, then a div with all the text userinfo text and a background image is used here repeated in the y direction, then a bottom image. So, that is how they get it to expand to any size. So, you would need to modify your postbit_legacy template in order to achieve what they have done.

<div class="userinfo">
<top image centered>
<div class="newclass"> all stuff from div class userinfo now put into here </div>
<bottom image centered>
</div>
and then have a background image for .newclass

[troykp]

Thank you for finding that out Lynne. :)

I'm very nearly there, there's just one final question I have; how do I assign a background to .newclass? I'm not entirely sure how these <div> wrappers work!

Thanks again.

[TheLastSuperman]

Thank you for finding that out Lynne. :)

I'm very nearly there, there's just one final question I have; how do I assign a background to .newclass? I'm not entirely sure how these <div> wrappers work!

Thanks again.

Hmm to keep it within the example given...

<div class="newclass">
Code
Code
Code
</div>

So to use that and have it know what the css does you need to add this to additional.css i.e.

.newclass {
background: #000000 url(images/myimage.png) no-repeat;
}

Now be sure to change the #000000 to the value for the background color you want and change the image location to reflect the image you uploaded or want to use and yes you can use http://www.site.com/thierimage.png) instead of image/ etc.

OR you could use this w/o assigning a color:

.newclass {
background-image: url(images/myimage.png);
background-repeat: no-repeat;
}

Something along those lines... basically your making up definitions that contain how something is styled, you make/paste the definitions in additional.css because the site runs it last out of all the css templates this way your code knows how it's styled follow?

:cool:.

Edit: also have you seen these simple mods?

https://vborg.vbsupport.ru/showthread.php?t=229487
https://vborg.vbsupport.ru/showthread.php?t=235041

[troykp]

Thank you very much Superman, living up to your name. :D

~ edit- got this fully working now.

Lynne, Superman, all your help is much appreciated. Thanks again!