Hi guys,

 

I am trying to code a site that has a background made of an orange gradient that's dark at the edges and lighter as you move inward toward the content (see image 1). It seems quiet easy to code this but there is one little catch (which is hopefully childs play to you guys)...the client wants me to make the content area (the white box) an expandable width while keeping the dark orange "border" at the edges of the window regardless of whether the width of content expands and also regardless of whether the window size changes. The orange border must stay at the size that it is too. So I can't just give the site an orange bgcolor.

 

Basically the edges are made up of little images. 4 corner images and then slithers of gradient tiled across the top, bottom, left and right of the page. I have used jquery to get the window size so that I can make the slithers tile across the entire width/length of the window but if I try to resize the window all the images move about. How do I make it stick in place even while resizing? I hope this makes sense to you guys. Questions welcome and help GREATLY APPRECIATED!

I think I would split the background image into two images, a left and a right, each having the gradient at the sides for a reasonable width, say 500px and then code the left side to the html style with repeat-y left top and also with an orange background which is the same as where the orange stops at its lightest color.

 

Code the right background-image to the body style with repeat-y right top also with an orange color.

 

What should happen is that the left and right sides will "move" in or out according to the window resolution and if the resolution is very wide, you just see the plain orange color where the background-image doesn't reach. The background-images with repeat-y need only be 1px high and they should only repeat vertically.

 

The top gradient would have to be a separate image fixed to the top with position: fixed; top: 0; left: 0; right: 0; and would stay there al the time, or position: absolute if you want it to scroll up.

 

Then code the white div with a % width if you want that to expand (or min-width and max-width instead of %).

 

I expect that there are other solutions.

Edited December 19, 201015 yr by Wickham

Thanks allot. That works fine in firefox etc. I was having issues with IE popping out the images when the window was resized...I was so puzzled...then I kicked myself when I realized I hadn't specified a doctype! Lol.

 

Thanks again for taking the time to reply!

Problem solved!