Skip to content
← Back to Community
How to get a moving Background Image in CSS!
Profile icon
EpicGamer007

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!

Voters
Profile icon
MariusAlecu
Profile icon
SantiDumbass
Profile icon
JWZ6
Profile icon
ss629435
Profile icon
Kookiez
Profile icon
AstOwOlfo
Profile icon
gibbsfreenergy
Profile icon
EpicGamer007
Comments
hotnewtop
Profile icon
AstOwOlfo

keep in mind, it'll have problems on wide screens if you have background repeats disabled ;P

Profile icon
Pharrisa

That looks like a great code to know. However, I wish to use a code to erase backgrounds from some photos that I like to use but look ugly due to some details. There is a href=https://depositphotos.com/bgremover.html free online background remover that I have been using for most of my photos, and it's quite impressive how fast it works. I need it regularly for my work as the pictures I find and need online have to edit and look original. So, for me cutting backgrounds and adding custom ones is a must. When it comes to sites, I would love to know how to automate the procedure with a code.

Profile icon
EpicGamer007

@Pharrisa can you not erase the background manually?

Profile icon
Siegwarda

Thank you for sharing mate. I was looking for that all over the place.

Profile icon
EpicGamer007
Profile icon
MohineeSharma

My background picture won't take up the whole screen for some reason. Instead of one big picture, there are lots of tiny pictures. I have the background-size set to fill, but I still don't know what's wrong. Can anyone help?
Screen Shot 2020-12-26 at 7.49.09 PM

Profile icon
EpicGamer007

@Mohinee try setting background-size: fill;

Profile icon
MohineeSharma

@EpicGamer007 I did, and it still doesn't make the image large.

Profile icon
EpicGamer007

@Mohinee i do not know if there is a possible way... maybe... you could set it manually

Profile icon
MohineeSharma

@EpicGamer007 OK, thank you for helping!

Profile icon
EpicGamer007

@Mohinee np gl

Profile icon
gibbsfreenergy

#javaGang

Profile icon
gibbsfreenergy

#javagang

Profile icon
gibbsfreenergy

This seems interesting! Nice job