Site Reference Forums

Laurie,

I recently changed my backgrounds to a gradient. I went with 1px wide and 1024 px high.

laurie_m wrote:

Thanks CE.

I've figured out another way to do it. Not original, I'm sure.

I've made the background image gradient 150px. high and made the body background colour the same as the bottom of the gradient. This way, the darker colour of the top of the gradient moves up with the page when scrolled. Suits my purpose.

Laurie -

You beat me to it.

I use a bunch of gradients (180 px high, 1px wide) like so:

background:#eeeee4 url(../images/gradient.jpg) repeat-x top;

My FAQ page shows how it looks when the div runs a while.

I try to keep the colors pretty close to one another. Seems to look better to me anyway. and will definitely help when the image runs out and the bg color takes over if you get the drift..

Sorry, I was a little obtuse. Even for me

I just meant if you want see that line of CSS at work, click the FAQ link in the header of the site in my signature.  There are divs in there that are 1000 px long or whatever with the image just 180 px.

It seemed to be pretty close to what you are up to.

And from the index you can swap out the style sheets (right hand column) and see some other combinations.

If you have the gradient kind of subtle you can't tell where it lays into the background color.

It may also be obvious but the fastest way to get the right background color is to "eyedropper" the last pixel of the image for the bg color #.

I may have been barking after the wrong bunny.

My page background is static, everything else is on a gradient, usually with CSS rounded corners. I do have the kind of inverted gradient box out effect that Northie's talking about on the "product" pages, which I think looks pretty cool. It was one of those "accidents" that I kept. There have been many.

Northie wrote:

biggest screens i've ever seen are 1200 px high.

My gradients are usually 800px high and 1px wide. I also make sure that the repeat is y-only

x-only?

Northie wrote:

Something you mentioned about rounded corners -

I hate rounded corners, just because I have difficulty making them, lol.

Anyway - for those who like them I've found this

Yeah they chewed up an afternoon or two..

Imported js and css, then you have to be careful about what's inherited and what's not and which elements you apply them too..

I do like them, because everything on the web is square. Including the rounded corners, if you read the fine print .

Mine are built mostly with this approach:

http://www.html.it/articoli/nifty/index.html

Last edited by DMX (2007-03-30 13:54:51)