[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 522
  • Last Modified:

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?
0
tf2012
Asked:
tf2012
  • 4
  • 3
  • 3
  • +1
2 Solutions
 
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
 
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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:
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:
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now