css background image problem

I have a page that has a different background pattern on the left than that on the right.  See attached.  I need this background pattern to span the page width regardless of browser size.

I will be slicing the pattern image vertically 2px by 400px or something and expect to repeat-x to create the background but ... as you can see the problem is that I have two patterns.

Keep in mind its a gradient and a simply repeat-y isn't going to do it.

How can this be done?
LVL 1
tf2012Asked:
Who is Participating?
 
Kyle HamiltonData ScientistCommented:
You can do it with css. basically you create a background that is positioned absolutely, and the content wrapper which sits on top of it. It's a little funky, but it works.

http://candpgeneration.com/EE/gradients.html

view source for the code.
0
 
Kyle HamiltonData ScientistCommented:
the attachment is missing.

are the patters 50% of the page width on either side?
0
 
tf2012Author Commented:
oops here it is
pic.jpg
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
COBOLdinosaurCommented:
An image does not give us any useful information.  It is obviously a code problem so we need to see the code or better yet a link to the page.

Cd&
0
 
GaryCommented:
This is where you would need to use a table layout, with css you cannot base the width on anything just using divs.

<table style="width:100%">
<tr>
<td style="width:50%"></td>
<td><div style="width:300px"></div></td>
<td style="width:50%"></td>
</tr>
</table>
0
 
tf2012Author Commented:
I was thinking of using a table too, but I was hoping there was a css 3 solution.  thanks GaryC123.. I'll leave the question open for a little longer hoping for a miracle ;)
0
 
Kyle HamiltonData ScientistCommented:
Here's an alternative solution, which is more fluid if you like that:

http://candpgeneration.com/EE/central-layout.html

as always, view source for code.
0
 
GaryCommented:
Hmmm I assumed you wanted the side bar columns to expand not have a set width for the content.
kozaiwaniec solution looks good
But from an aesthetic point of view I think that would look wrong if the content is 150px wide and the background is 400px wide - but thats just my point of view
0
 
Kyle HamiltonData ScientistCommented:
hi Gary,

when is the content 150 and background 400? which solution, the first one or the second one?

screenshot of said irregularity?

cheers.
0
 
tf2012Author Commented:
kozaiwaniec... pretty cool thanks, garyc thanks too
0
 
GaryCommented:
Your first solution (second works doesnt work great in IE) still requires a width set on the sidebar, but he's happy with that and your solution works fine.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.