Auto stretch header

[chilllax]

Right now my header image is a sinlge image and doesnt fit the page exactly. So I split my single image into my logo image and my pattern image. What I want to do is have the pattern image stretch to the size of the forums. What code would I use for this?

thanks for any help and sorry if this is in the wrong section:)

[steven s]

I don't see a way unless you change your image to have horizontal lines.
You could use a 3 column table with your image in the middle and continue with the background in the outside columns using the background tag.
But they would need to be horizontal lines that meet up with the center image.

Edit: Oh wait.
Do you want to use the image on your website now?
You could create a table and use the td background tag of just the background.
Or better yet, separate the background image and use that as a background tag. Set the table to 100%.

[Ntfu2]

<div class="title">
<img src="first header image.jpg" border="0" />
</div>

title {
background-image: url(http://www.image.com);
background-repeat: repeat-x;
background-position: center top;
}

[steven s]

But the image is going to have to be broken into two pieces. The logo and the background.
The background needs to be a linear pattern.

[Ntfu2]

oops, thought he already had it into peices.

[steven s]

oops, thought he already had it into peices.
You're right. I reread the first post.

Is there an advantage using CSS and a div tag over a table tag?

[Ntfu2]

no not really.

Some people are CSS nut cases, i have no preference myself. Generally i use the table myself, i have no clue why i posted CSS :)

[chilllax]

I don't see a way unless you change your image to have horizontal lines.
You could use a 3 column table with your image in the middle and continue with the background in the outside columns using the background tag.
But they would need to be horizontal lines that meet up with the center image.

Edit: Oh wait.
Do you want to use the image on your website now?
You could create a table and use the td background tag of just the background.
Or better yet, separate the background image and use that as a background tag. Set the table to 100%.

Thanks for all of the help, so my second stretched image would have to have a linear line pattern, I couldnt have slanted lines? You guys probally know this but what you talking about will only make the image stretch to the size of the forum right?

[steven s]

Thanks for all of the help, so my second stretched image would have to have a linear line pattern, I couldnt have slanted lines? You guys probally know this but what you talking about will only make the image stretch to the size of the forum right?I don't think the slanted lines would work because they have to meet each time when repeated with CSS.
I think if you use your slanted lines background, make it wide enough to fit any screen and use it as a background in in a table cell it would work. That way when the screen width is changed, so will the background.

Post the background and top image and I'll show you what I mean.
I'm sure there are other ways to do it. This is the only way I know how.

[Ntfu2]

The slanted lines will work, you need to create something like a 2px x 2px version of it, and use that as the background :lol: Its a pain.

Like 1996 said, Post your two images, and the header code you currently have and i'm sure we'll be able to help you

[chilllax]

My two images are http://just-lax.com/images/JustlaxLeft.jpg

and http://just-lax.com/images/JustlaxRight.jpg

As of now, I have no code its just one image.

[steven s]

The only way I know is
<table width="100%" border="0" cellspacing="0" cellpadding="0" background="JustlaxRight.jpg">
<tr>
<td align="center"><img src="JustlaxLeft.jpg" alt="" height="60" width="281" border="0"></td>
</tr>
</table>
It's going to be a bit jagged. It would be beest if JustlaxLeft.jpg did not have any of the diagonal lines.
Try it on a plain html page.

[chilllax]

Thanks for trying to help me out but that didnt really work like I thought it would. Instead of stopping at the forum width it continued past, also the pattern was a little off. Are there any other ways?

[steven s]

I'm no graphics designer, but I think the pattern will be off. It's like putting up wallpaper and the seams don't quite match.
As far as making the width correct, I guess it's all a matter of where it is placed in the header template.
But at least you get the general idea now.

[chilllax]

Just like you said it was where I put it in the header, thanks! I just have to work on the pattern now.