Ever-expanding Background

[Vexir]

Does anyone know how people make those ever-changing backgrounds, the ones in which say, you have an intro page with a simple Enter Site and a logo on it right in the middle, and then a radial gradiant for a background. And SOMEHOW, you won't ever see scrollbars on that page, no matter what the resolution of your monitor is, and yet the gradiant stays the ratio?

I dont know what they do at all. A large image and then scaled down doesn't seem like a plausible solution, seeing as a person with 800 by 600 on 56k downloading a 1680 by 1050 image doesn't make too much sense.

Another sort of side and distantly related question, imagine a plain Enter Site image on a page, with a black background. Horizontally centering it is trivial, with <center> but how does one vertically center it? <vcenter> isnt a tag, although I wish it was. A solution to this problem is probably make a single celled table and then tweak the cell alignment properties. But still. Can't do that with an ever-changing background I should think.

[LunaSolar]

Show me an example of exactly what you want and I will show you how to do it as long as it is xHTML/ CSS.

I think I know the answer you are looking for, but I might be misunderstanding the question.

PS: Verticle Center with CSS

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

[LunaSolar]

I think it is just a horizonal centering job with a repeating image to "cover-up" for the size chage, but I could be mistaken until I see what you mean.

[Vexir]

I can't find an example of atm, but when I see one I go "howd they do that"

[LunaSolar]

If ya' find one let me know.

My Gamertag is: LunaSolar

I am hardly ever on, but you can try to catch me whenever.

[LunaSolar]

The thing that is throwing me here is "Radial Gradient". I see it ALL the FREAKIN TIME with a liner "top down" gradient, and that is way simple, but I think I have only ever seen it with a "radial gradient" once, and it was a MAJOR hack job.

If I saw it, I would know.

[Vexir]

Well first explain the top down gradiant :)

[fasterthanlight™]

If I understand what your going on about vexir, its all just CSS....
with CSS you can set your background image to:
repeat-y, (tile vertically) repeat-x(tile horizontally) or no-repeat (Obvious).
Most background images are only 1px wide, but tiled horizontally it'll cover the entire screen no matter what resolution, then its just a matter of matching hte entire image with the backgroun image.

as for radial, I dont know the only feasible way would be craeting a giant image like you said and centering it... Thats probably how they did it in the site your talking about, and you probably didnt notice the large download becasue youre on a fast line..

[Vexir]

Yeah probably. Interesting :P

I just thought of another possibility. Because I can't remember exactly what the site was, mabye I was mistaken and mabye the gradiant was small enough to be just an image, and then of course its very easy to center it.

So how would one do a vertical linear gradiant?

[B L U E]

make the pattern 1px tall instead of wide, and use repeat-y instead of repeat-x

[fasterthanlight™]

and make it über long... like 1800px long for those with big monitors

[Vexir]

How does making it repeat form a gradient?

[fasterthanlight™]

http://www.february-stars.com/Kozo/style/images/bgFade.jpg

example^^^^

that tiled vertically creates a horizontal gradient

full page:
http://www.february-stars.com/Kozo/


;)

[Vexir]

Ahhh. No I meant a top-down gradiant :P

[iLikePie]

because within the one pixel wide line, there's a transition of colors.... so when its repeated heaps you see the pattern.

so it's a bit like (using ascii art :P)

red-------orange----------yellow-----------orange---------red

or something like that.

but since you have to make the image really wide, i'm not sure how you stop the scrollbars being added, i s'pose it's some css or something.

[LunaSolar]

Ahhh. No I meant a top-down gradiant :P

look at the blog here:

www.luna-solar.com (http://www.luna-solar.com)

The top image looks like this:

http://www.luna-solar.com/blog/wp-content/themes/LUNAFINAL/images/bg.png

and the CSS is:



body{
background:#f7f3ea url(./images/bg.png) repeat-x;
border-top:5px solid #483306;
color:#555;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:62.5%;
line-height:1.5;
margin:0;
padding:0;
text-align:center;


Is that what you need?

[Vexir]

Okay nevermind. It was a stupid question anyway. Thanks guys.

[ramie]

Is this what your after?

http://ramieb.com/vex/linear.html

http://ramieb.com/vex/radial.html

The radial BG weighs in at 26kb, it's a 24bit png at 600x400, the linear is 1kb 24bit png at 1 x 400, css as it is will not let you stretch a BG image, so you have to work it a little in the css, link to source also.

http://ramieb.com/vex/source.zip