Trying to use 3 images to make the header

[PJSkiboy]

What I am trying to accomplish is to use a banner I've created, keep it centered on my forums (dynamic, not fixed width) and have a stripe that extends off both sides.

My thought was to make three images to do this. A left-hand side image that is only 1 pixel wide, the banner image itself, and then another 1 pixel wide image on the right-hand side. I do not know if this is the best way to accomplish what I'm wanting or not, but that's just my initial thought.

I've been playing around with HTML and CSS trying to get those outside images to repeat, but I have had no success. I can get all three images to appear in my header with the banner staying centered just fine, but I haven't been able to get those outside images to repeat no matter what I've tried.

I have honestly (and I'm sure someone is going to call me a liar, lol) searched page after page of posts searching under "header", "banner", "repeat", etc... and I haven't found anything that has helped me to this point. This really seems like a redundant post given so many that are similar to my request, but nothing I have found thus far has helped my situation.

Thanks in advance for anyone that can point me in the right direction.

Thanks.

-----------------------

p.s. - I know you can use the following css code to make a gradient repeat for a background image, but how or where would I put something like this just to get it to work in the header?

p {
background-image: url(http://www.example.com/gradient.gif);
background-repeat: repeat-x;
}

--------------- Added [DATE]1235350857[/DATE] at [TIME]1235350857[/TIME] ---------------

Nevermind, buddy of mine got it figured out.

So he fixed it by going to the CSS Body area under All Style Options for the style I was trying to get this to work with. And under the Standard CSS Attributes, the first field is Background. Typically you just have the background color hex code there, but after that he put a space then put in the url for the image url(yourimage.gif) repeat-x and it worked like a charm.

This way you only use the one image as it repeats all the way across the page, then the background image, or banner, just sits on top of the repeating image. Uses only two images instead of three.

Just thought I'd go ahead and put the solution to my question in here in case someone else was trying the same thing and needed a pointer.

[pein87]

Ok for this one you will need to remove the top table in your header template.
Next make a new table or just delete the td for the standard vbulletin image.

Now make a new td using this method

PHP Code:

<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><!-- add your images here -->
</td>
</tr>
</table> 


You would basiclly need to add one td and 3 divs

each div would have its own css properties. Now are you trying to do this one image on one side and one on the other with a gradient fill between them both?

do do that please not if the boards width is fixed or fluid. If fixed use the width property to set the divs width and you will do this on both ends.

It should look like this

PHP Code:

<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><div class="headerimg"><img src="images/misc/headerleft.png" alt  /></div><div id="headergrad"><!-- gradient --></div><div class="headerimg"><img src="images/misc/headerright.png" alt  /></div>
</td>
</tr>
</table> 


Now css wise

PHP Code:

.headerimg {
height: 150px; /*set your height in pixels */
width: 200px; /*set your own width in pixels*/
/* if images are not the same lebght change the class to and id and add a new name to which ever is shorter/longer*/
}
#headergrad {
height: 150px;/*set your height in pixels */
width: 600px;/*set your own width in pixels*/
} 


You can use <img src alt="" /> or set a background image.

If your board ifs fluid you need to adjust the above to reflect so and in the headergrad id make its width 100%

I`ll try this out and give you a code show with images.

[UberDoober]

I have something similar but the middle strip is the repeating part while my left and right images stay put. Here is my header template, most of it anyway.

<!-- logo --> 
<a name="top"></a> 
<center> 
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center" style="background-image:url($stylevar[imgdir_misc]/bkg_header_blu.png)"> 
<tr> 

<td align="left" valign="top"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/left_header_blu.png"  border="0" alt=""/></a></td> 
<td align="right" valign="bottom"><img src="$stylevar[imgdir_misc]/right_header_blu.png" alt="" /></td> 
</tr> 
</table> 
</center>

My bkg_header_blu.png is the one that's only a few pixels wide.

This works for me perfectly. Hope it helps? My forum is fluid and I've used this in all my styles. It is here: www.dooberville.com/forums

[PJSkiboy]

Appreciate you guys sharing what you know.

Greatly appreciated by noobs such as myself.