Random html stuff

There is no point to this page other then chronicalling random html/css stuff I think is cool. Mostly described for people who don't know much html/css.

Scrolling Background

Scrolling backgrounds are good for making your website more stylish. They're also just,, kinda,,,, fun,, to h a,, a,ve,,,

To start, create a <div> and give it a class called "background-1". Then, in your css styling, add these paramaters to elements with the "background-1" class:

• position: fixed
• left: 0
• right: 0
• top: 0
• bottom: 0

This makes the div cover the whole screen, and will follow the user as they scroll. Then, add:

• z-index: -1

This places the div behind all elements. Think of it as putting the div on another layer (defined by the number)

We'll then need an image to use. I'll just use the one already in the background

Then, add this parameter to the background css:

• background-image: url("url to ur image here");

Your websites background should now have your image on it! But it isn't moving, that's the next bit.

You're going to now create an animation that scrolls your image by a multipication of it's resolution. So, say your image is 100 pixels tall and 200 wide: You'd want the image's scroll position to start from 0, 0 and end at 100, 200 (or 100, 400 if you want it to move downwards more, just make sure you can cleanly divide it by the original resolution).

Add the below code into your css:

@keyframes scroll-anim {
 from {}
 to {}
}

This defines an animation in your css that you can apply to other css elements.

inside the brackets next to "from", add:

• background-position-y: 0px;
• background-position-x: 0px;

This just sets up the animation to start from 0, 0. Then, add this to "to":

• background-position-y: (IMAGE Y RESOLUTION)px;
• background-position-x: (IMAGE X RESOLUTION)px;

Where you replace the (IMAGE ? RESOLUTIONS) with their respective values.

Now that you have the animation, apply it to the image by adding:

• animation : scroll-anim (TIME)s steps(calc( (FRAMERATE) * (TIME) )) infinite

Replace (TIME) with the amount of seconds you want it to last (keep the "s" on the first one, that stands for seconds). Then, replace (FRAMERATE) with the fps you want your animation to run (for example, the background on this page is running at 15fps)

Once that's done, your page will (hopefully) have a working scrolling background!