From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Animating backgrounds

Animating backgrounds - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Animating backgrounds

“

- [Chris] Hi, this is Chris Converse, and in this episode we'll use CSS keyframes to animate a background image resulting in a seamlessly looping animation. So, if you'd like to follow along with me, download the exercise files and we'll begin by opening the HTML file in a text editor. So, once you have the HTML file open, down in the body area you'll see we have a figure element here. Inside of the figure element is an image element, and this links to harbor.png. This is the semi transparent graphic down here at the bottom. We also have a link in the head area to style.css. Now, to create the animation let's go back to the exercise files. Let's find that style.css file. Let's open that in our text editor. Now, let's scroll down. First thing we're going to do is add a background graphic to that figure element. So, let's find the figure selector here. After overflow: hidden let's hit a Return. Let's come in here and add a background property. So, after background: we'll specify an…

Contents