Setting a background image

[RickyH]

Hi Guys!

Just started fondelling with vb4.

I have a body_wrapper image, shown below. I want it basically to resize to the size of the body_wrapper, although there are no physical options to set this, without making an image that is the exact same size as the body. If i can help it, i don't want to CSS it in because then it gets messy for me.



Any ideas would be greatly appreciated!

[RickyH]

Any ideas on this one? Really need to get the styling done for it. I've thought of finding the code and adding a top, middle and bottom div and then cssing it in that way. May be easier, unless there's a fix for just 1 image

[Lynne]

You are going to have to do it your second way:

I've thought of finding the code and adding a top, middle and bottom div and then cssing it in that way. May be easier, unless there's a fix for just 1 image

[RickyH]

Thanks Lynne, just a quick one to save some time, where is the #body_wrapper div located? Forum Home? Forum Display?

[Lynne]

To find the template to modify, do this - vboptions > General Settings > Add Template Name in HTML Comments > set to Yes . Then go back to your page and view the source code and you will see the name of the template called around your part of the code. (Sometimes the template is the one mentioned at the very top of the page source.)

[RickyH]

Got it all sorted! Thanks Lynne! I just used "Search in Templates" for the classes and what not then hard-coded them in Thanks a lot!

[RickyH]

Just thought i'd post to give other users a quick insight into how to fix:

Search in Templates -> body_wrapper -> Find -> navbar

Once you find the line: "<!-- closing div for above_body -->" enter a new div, e.g <div id="body_wrapper_top"> </div> (Needs no content for the div as it is just a placer for the image!)

Save & Reload. Once again search for body_wrapper but open footer this time. just below the line "<!-- closing div for body_wrapper -->" add a new div, e.g <div id="body_wrapper_bottom"> </div> (No content again).

Once you've done this and saved, then you can edit vBulletin.css and style it correctly. Please note, because there is no content on the divs you have created, you NEED to set a fixed height and width. I also recommend fiddling with the margins and padding as the main content div will overflow the bottom and top background images, simply open the webpage up in chrome or firefox, right click & inspect element, fiddle with the css and make note when it's correct, then edit it all in vbulletin.css and the stylevars

I'll try add some images later!