Gradient to fill space

HTML & CSS
1

Hi all

I have a website design that I need to code. My main problem is the design uses gradients and borders (shadows).

Here is a link to the design and what I have so far: http://starsites.co.za/test/template.html.

You will notice there are areas which either do not have a background or don’t seem to fit in. How do i get that background filled in (the design will be used as an WordPress theme)? Since the content will be dynamically added, I can’t know how much content there will be so either the gradient images should scale or I have to add the bottom pixel line of the gradient in some way that it repeats (form where the gradient stops).

Please note that the images use alpha transparency and thus layering them will not work.

Thanks for any help in advance.

2

Do yo have the images that are used as separate files or is it just one big file?

3

I have the layered PSD file which I used to slice the image that are used in the template.

The header section is 3 files (left,logo,right)
Then is the main content gradient (which should either stretch or be followed by the one pixel line)
Then is the footer image.

The sidebar have a single image (the clouds) which should always be at the bottom.
The post’s images consists of a header (where the title will be displayed), a content section (also a gradient that should do what the other gradient do) overlayed by clouds which should also be at the bottom and the footer (which closes the border in rounded corners)

This design have been approved by my client’s client and I was asked to only convert it to a WordPress theme, so the design is locked. I can however re-slice the images again.

Thank you for your reply

4

well… if i could suggest that you just create a ‘huge’ slice that covers the gradient fill part and make your background the bottom color. have your slice then repeat so it would look like it has the huge gradient fill but the background is still solid and the whole box can grow without looking weird. only problem is that the gradient will only then be as big as you make the slice. then just have another image that is positioned at the bottom for the bottom clouds.

I’ve read that there is another ‘cheat’ way of creating the gradient effect, but not all browsers support that, so i would rather suggest using a sliced image :smiley:

5

Thank you all for your help.
I have decided to rather use a single pixel line from the center of the gradient and then repeat that. It will result in a slight difference between the header section and the body and the footer, but it still looks good, while it stays cross-browser.
Thank you, again.
Jacotheron

6

Cool :smiley: