Creating website background with gradient?

Messiah Khan · 22 May 2008 at 15:09

Is it possible, and what is the best way to create a website background with a gradient. And to be awkward, I ideally would like the gradient to go corner to corner and include pinstriping. Any ideas?

Ross1234 · 22 May 2008 at 15:11

it is possible, but not reccomended. You would have to create a graphic the size of the whole page.

MarcLister · 22 May 2008 at 15:13

You could use background-repeat. http://htmldog.com/reference/cssproperties/background-repeat/

You have an image that is say 1 or two pixels wide by a few hundred tall and then repeat that across. Or have an image 1 or 2 pixels tall and however wide and repeat it down.

I think this is done so you have just one small image to have loaded and the browser can then repeat it for you.

Ross1234 · 22 May 2008 at 15:15

MarcLister said:
You could use background-repeat. http://htmldog.com/reference/cssproperties/background-repeat/

You have an image that is say 1 or two pixels wide by a few hundred tall and then repeat that across. Or have an image 1 or 2 pixels tall and however wide and repeat it down.

I think this is done so you have just one small image to have loaded and the browser can then repeat it for you.

wont work with a full page diagonal gradient. He said corner to corner.

Ross1234 · 22 May 2008 at 15:16

Messiah Khan · 22 May 2008 at 19:41

Ok cheers guys, thought as much. How about a gradient running down the page? I know it can be done with the way you have posted MarcLister, but when happens if you say make that gradient 800px tall and 1px thin, but then the content stretches the page over 800px tall. Won't it look weird? Is there a way to get around this?

MarcLister · 22 May 2008 at 19:42

So the gradient will be 800px tall but the content itself will be taller? The gradient will just stop and you'll see the background colour of the page I believe.

Messiah Khan · 22 May 2008 at 19:46

Ok cheers. Ive just thought though, I could have the background as a static image and have only the content scroll. That would work I recon. Hmm, ideas ideas.

monkeysmith · 22 May 2008 at 19:59

Setup the page background to be the colour of the bottom of the gradient, wont show then, will just merge into the page.

Ross1234 · 22 May 2008 at 19:59

what i suggest is have it go to a solid colour at the bottom, which is the same as the background colour of the page. Does this make sense?

EDIT: Arrgh! You quick posting poo!

SourChipmunk · 22 May 2008 at 20:14

monkeysmith said:
Setup the page background to be the colour of the bottom of the gradient, wont show then, will just merge into the page.

Ross1234 said:
what i suggest is have it go to a solid colour at the bottom, which is the same as the background colour of the page. Does this make sense?

Yup, that's exactly it. Here's two examples: http://www.msn.com or http://www.mtariders.com

robmiller · 22 May 2008 at 20:17

Messiah Khan said:
Ok cheers. Ive just thought though, I could have the background as a static image and have only the content scroll. That would work I recon. Hmm, ideas ideas.

Code:

background-position: fixed;
background-repeat: no-repeat;

shifty_uk · 22 May 2008 at 20:21

monkeysmith said:
Setup the page background to be the colour of the bottom of the gradient, wont show then, will just merge into the page.

Exactly. There's no reason why it can't be done.

Quickly knocked this up as an example:
http://www.ryanarts.co.uk/temp/gradient/untitled.html

Ross1234 · 22 May 2008 at 20:43

shifty_uk said:
Exactly. There's no reason why it can't be done.

Quickly knocked this up as an example:
http://www.ryanarts.co.uk/temp/gradient/untitled.html

that example is the most hideous thing i have seen in my life

shifty_uk · 22 May 2008 at 20:45

Ross1234 said:
that example is the most hideous thing i have seen in my life

Indeed.

..Gets the point across though.

MarcLister · 22 May 2008 at 21:00

Ross1234 said:
that example is the most hideous thing i have seen in my life

Indeed. Bucket at the ready here.

shifty_uk said:
Indeed. ..Gets the point across though.

Does quite. And something else.

Messiah Khan · 22 May 2008 at 22:17

Cheers folk, thats the shinizzle in after. Im just having a play around with a totally different colour scheme at the moment. Decided against going for the pink you used shifty_uk.

MarcLister · 22 May 2008 at 22:28

Messiah Khan said:
Cheers folk, thats the shinizzle in after. Im just having a play around with a totally different colour scheme at the moment. Decided against going for the pink you used shifty_uk.

Why would that be then?

shifty_uk · 22 May 2008 at 22:48

MarcLister said:
Why would that be then?

Ross1234 said:
it is possible, but not reccomended. You would have to create a graphic the size of the whole page.

Many websites use uber large background images these days. It's not a worry with the speeds ISP's are providing these days.

MarcLister · 22 May 2008 at 22:49

Hmm so I'm missing a trick by getting my internet access from ISPs then?