Scrolling Background Tutorial

I seen something like this on another website on neocities and I wanted to try to recreate it myself. It ended up being a bit difficult to figure out so I thought it would be fun to make a short guide. (partially in case I forget how...) Feel free to copy my code!
Anyway, I hope that whoever comes across this finds it helpful

• Any image type can be used (png, jpg, gif), but smaller images or patterns work best. Link the image in your css file. I used the body for the hearts and the div below. Just use a class when working with common tags like a div. Add 'repeat' to the background property to cover the element.

  body {
     background: url("image.png") repeat;
  }

  Div Example

• Add the animation property to the tag/class and name it. Add the code below after the name to your code. 3s(animation length), infinite(repeats forever), linear (keeps it from pausing inbetween each repeat), 0s(time for linear property).

  body {
     background: url("image.png") repeat;
     animation: ani-name 3s infinite linear 0s;
  }

• Next you'll need to add the keyframes (don't worry its easier than it sounds!). Just copy the code below and change 'ani-name' to the name you used in the animation property. *** Do not place this code into the body/class *** After that find the width and height of your image and place them into img-height and img-width. If you don't know the dementions, find the image, right-click, click properties, and select the details tab.

  @keyframes ani-name {
     from {
       background-position: 0 0;
     }
     to {
       background-position: img-height, img-width;
     }
  }

• The animation should be working now. Depending on the image size or type you may need to tweak it a bit. I've tested out a few images and left some notes below.

  Div Example

• Change the background-position width, height to negative numbers to change direction

positive, positive

negative, negative

negative, positive

positive, negative

• If you have a transparent image and want to add a color, add the background color AFTER the background image. If you place the color before the image it will not display. * I used this method on the body *

Original background

• To speed up or slow down the scroll change the seconds (Original: 3s)

1s

8s