I need help on HTMl background.

ParaSnake · 07-20-2005

Hey,i`ve noticed that some website are built like this :

1.The background is staytill when i scroll the scrollbar up or down,only the content of a site moving,hte background wont move.cool.

2.The background is fading,at the top,its dark and when scrolling down,it turns to light color.

Anyone know how to do this?
Thx for anyhelp

aldog · 07-20-2005

I'm assuming the fading thing you're referring to is like what the biorust tutorials page looks like...this, i have no clue how to do.

as for making a picture stay still.
if you use style tags...this is how you do it

background-image: url('http://www.30mb.com/x/aldog/images/bg2.gif');
background-repeat: look down for instructions;
background-position: center;}

repeat-y = it repeats itself up and down...
repeat-x = it repeats itself left to right...
no-repeat = it stays still

Order · 07-20-2005

to do the fading thing, create a background image that fades from one color to the next, remember the html color code for the color at the bottom.

style your body tag:

Code:

body {
  background: #COLOR url('images/fading-bg.gif') repeat-x left top;
}

As you can see, quite simple. Change #COLOR to that color code I told you to save.

aldog · 07-20-2005

I'm glad you asked this ParaSnake
and I'm glad you answered Order.
It's a neat effect.

Order · 07-21-2005

It is a neat effect, and also an easy one. The idea of using css in your files is cut down on loading time, use less images to achieve what you need..

scrowler · 07-21-2005

and if you want it to stay there even when you scroll down, put this extra code into your body css definition too:

Code:

background-attachment: fixed;

this is a neat addition

ParaSnake · 07-21-2005

I will have a try tonight,thx for all the helps

@aldog: If you glad,then plsu each of us some reputation points keke

Paintmonkey · 11-09-2005

Quote:

Originally Posted by ParaSnake

Hey,i`ve noticed that some website are built like this :

1.The background is staytill when i scroll the scrollbar up or down,only the content of a site moving,hte background wont move.cool.

2.The background is fading,at the top,its dark and when scrolling down,it turns to light color.

Anyone know how to do this?
Thx for anyhelp

or you can try:

/*
Watermark Backgound Image Script- © Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and TOS,
visit dynamicdrive.com
*/
if (document.all||document.getElementById)
document.body.style.background="url(insert your image name here) #EEEEEE center no-repeat fixed"

it's from dynamic html.

j3ll3 · 12-20-2005

Look here for the fixed background:
http://www.w3schools.com/css/css_background.asp

Look here if you want an image to stretch over the entire screen;
http://www.htmlite.com/faq022.php *there is a small nesting error in the example, the image tag isn't closed

*

Good luck

malboroman · 12-21-2005

You could also ask m0g about this. The previous design of biorust included one of these gradient background if I remember correctly. It was the one with the green background, right m0g?)