How to get a Moving Picture Background with CSS

Okay, so i checked out @agent9002 's conversion calculator. AND IT WAS GODLY(Amazing background, etc.)

So i was able to figure out how to get a background like that, and with css, you can really make it shine

And it really is quite simple.

All you need to know is how to use @keyframes for animation

Okay, so i will not be showing you guys the html but i will explain the css

1. First get the div or whatever place you want the moving background to be

For this tutorial, we will just be using the body

body{}

2. Get the image. Search it up on google or something. FOR BEST RESULTS, GET A LARGE IMAGE(1920 x 1080 p or larger)

3. Make that the background image:

body{

	background-image: url("res/background.jpg");

}

Optional: If you want to have text over the moving image, I suggest making it darker(if you plan on having the test be lighter) or making it lighter(if you are planning on having the text be darker). Here is an example to make the image darker:

body{

	background-image: background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url("res/background.jpg");

}

Now you can put text over it!

4. Set the background to fill.

Set the background-size property to fill(or however large you want it to be)

body{

	background-image: background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url("res/background.jpg");
	background-size: fill;

}

STEP 5: CREATING THE ANIMATION

Okay, here is the fun part.

Creating the animation. In this example, we will be creating a moving background but please know, *YOU CAN DO ALMOST ANYTHING YOU WANT WITH THESE ANIMATIONS(Meaning that you are not restricted to just change the position of the background in these animations)*

so we create the @keyframes thing:

@keyframes backgroundAnimation{



}

Then we set it's position for 0%, 50%, and 100%

We can change the position of the animation using the background-position property

@keyframes backgroundAnimation{

	0%{background-position: left center;}
	50%{background-position: right center;}
	100%{background-position: left center;}

}

6. Add the animation to the background.

all you have to do now is add it

//Back to the body

body{

	background-image: background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url("res/background.jpg");
	background-size: fill;
    	animation: backgroundAnimation 15s ease infinite;

}

This sets the animation to backgroundAnimation to run for 15 seconds, to ease in and out, and to go for an infinite amount of times

Yeah, that is pretty much it. If you want to get an example of this in action, go here

I hope y'all learned something from this tutorial! :D

Happy Coding ;)

Note:

I still am really noob at HTML and CSS so I would really appreciate all feedback and pointers.

Thank you!

How to get a moving Background Image in CSS!