3 replies to this topic

[Clandestine]

Ok so i made this template and as you can see the boxes arnt all the same color. SO when I slice it and the boxes stretch its going to look funny. Should i just make the boxes all the same w/o gradiant or is it possible to do it this way?
http://img.photobucket.com/albums/v398/cla...d/website03.jpg

Thanks

[Jacorre]

Because you're using a pattern as a background you'll have to find a seamless area where it can repeat. It looks like that will be too difficult with the type of pattern you're working with since there's bumps in random places. I'd try using a pattern that's less detailed.

[UnderCoverUZI]

You could try slicing that and have a tranparent BG, I've never used transparent ones so I'm not sure, also a 0 occupancy or w/e might work.

[rc69]

The hardest part i can see is the body's background. Getting that to look good on all resolutions would be quite a pain.

What i would do with the boxes is make a series of divs.
The bottom div would act as a container.
Then 2 middle divs, 50% in height, floated/positioned so that you can put another div on top of them.
Then a top div to hold the content with the gradient centered in the background.
i.e.

<div id="container">
	<div style="height:50%; position:relative; background-image: url(gradient_bright.gif);"></div>
	<div style="height:50%; position:relative; background-image: url(gradient_dark.gif)"></div>
	<div style="background: url(gradient.gif) repeat-y center left;">
	blah
	</div>
</div>

The 50% height div's would need to be played around with quite a bit to get them to work perfect, that's just a rough example.

The top div would have the brightest part of the gradient repeat, the 2nd div would be the darkest part of the gradient, and the 3rd div would be the actual gradient from the brightest part to the darkest. That way, it will always trasition in the middle of the box.