How To Add Animated Background Image To Css

If you want to engage beginning-time visitors on your website, you have nearly 10 to xx seconds. To inject some life into your page content, you might want to attempt adding a background video with CSS.

Video backgrounds take upwards the entire width and height of the viewport (in other words, the visible page expanse) and add together some visual flair to boost engagement. Over this video, you tin place your featured page content — subsequently all, it is just a background, and your content is most important.

Download Now: Free HTML & CSS Hacks

Video backgrounds may seem like a fancy feature, only they're actually easy to implement if y'all know some CSS. In this guide, nosotros'll evidence you how to add a unproblematic fullscreen video background to your webpage, which you can tweak and adapt to your needs.

How to Create a Fullscreen Video Background With CSS

To testify y'all how to create video backgrounds for your site, we'll share some code that you can re-create to modify for your needs. We'll also see the code in action with some responsive video background CodePen modules.

Let'due south get-go with our HTML. Beginning, we'll place a video on our folio with the <video> tag and several attributes.

                                          
<video id="background-video" autoplay loop muted poster="https://assets.codepen.io/6093409/river.jpg">
<source src="https://assets.codepen.io/6093409/river.mp4" blazon="video/mp4">
</video>

All of these attributes are important for the groundwork to work as intended, so allow'southward go through each one:

The id attribute is for styling our video element with CSS. This is necessary to achieve the fullscreen background effect.
The autoplay attribute starts the video automatically in one case the folio loads.
The loop attribute plays the video in an infinite loop.
The muted aspect turns off sound for the video. By and large, you shouldn't play video sound on your folio unless the user turns on sound. Doing so is an accessibility issue and can brand for an unpleasant user feel.
Finally, the poster prototype is shown on the screen as the video is loading, or in place of the video if it doesn't load. We recommend making your affiche image the commencement frame of your video for the smoothest look.

<video> tags unremarkably include the controls attribute besides. However, we've left it out because we don't want users pausing the video or skipping around.

Afterward our video element, let's add some HTML filler content to see how text appears against our video background.

                                          
<h1>THIS IS A RIVER.</h1>
<h2>How regal.</h2>

With the HTML done, allow's handle the CSS business. To plough our normal video into a background video, add together the following CSS:

                                          
#groundwork-video {
  width: 100vw;
  superlative: 100vh;
  object-fit: embrace;
  position: fixed;
  left: 0;
  right: 0;
  peak: 0;
  lesser: 0;
  z-index: -ane;
}

Let'due south go through each of these rules to understand what they do:

superlative: 100vw (viewport width) and width: 100vh (viewport peak) brand the video extend to the full width and height of the viewport.
object-fit: encompass automatically sizes the background video to go along its original aspect ratio while filling the screen, clipping out edges of the video when necessary.
position: stock-still and the following left, right, top, and lesser position the video relative to the viewport and separates information technology from the rest of the page content. This keeps the video in place when the user scrolls, and allows other content to sit on tiptop of it.
z-alphabetize places the video background under accompanying content.

Next, we'll add together some styling for our other page content. For accessibility, make sure text placed over video provides ample color contrast with the groundwork:

                                          
h1, h2 {
  color: white;
  font-family: Trebuchet MS;
  font-weight: bold;
  text-align: center;
}h1 {
  font-size: 6rem;
  margin-top: 30vh;
}
                      h2 { font-size: 3rem; }

At this point, the video groundwork will display nicely. Simply, we haven't accounted for mobile devices however. It's usually a skillful idea to prevent auto-playing videos on mobile, since the data needed to play them is pregnant and users didn't request to play the video in the first identify.

Instead, we'll add a media query that substitutes the video with our poster image on screens 750 pixels wide or smaller.

                                          
@media (max-width: 750px) {
    #background-video { display: none; }
    body {
      background: url("https://assets.codepen.io/6093409/river.jpg") no-repeat;
      groundwork-size: encompass;
    }
}

When we combine everything, we get a sleek video background that scales with the screen and displays an image on mobile devices. (Notation: Click here to see the example with the video playing.)

Run across the Pen Video Background i past Christina Perricone (@hubspot) on CodePen.

If you need more help learning how to make this code work for your site, check out this CSS background YouTube video tutorial:

Add More than Page Content

We've already put some headings on the page to see how content looks against a video background.

Notwithstanding, your page will probably contain more content than a video background and some title text. And so, allow's add together a <main> section to our example that appears when the user scrolls downwards. This chemical element volition embrace the video to bring the focus to your main content. (Note: Click here to see the instance with the video playing.)

See the Pen Video Groundwork 2 by Christina Perricone (@hubspot) on CodePen.

We've given our <main> element a background color to comprehend upwardly the video, every bit well as a top margin in viewport height units. This fashion, the principal content will appear equally presently as the user starts scrolling.

A CSS Video Background to Engage Your Audition

Life is curt, and nobody wants to waste product their time on a run-of-the-factory webpage. With just a few lines of CSS, we've created a full-page video background template that you can customize for your audition.

Using a site'south background for a video might not be the ideal choice for every website, and are usually a no-go on mobile websites due to their bear on on mobile performance. However, if washed well, video backgrounds can make quite an impact, and there's no need to even push play.

Editor'south note: This post was originally published in June 2021 and has been updated for comprehensiveness.

New Call-to-action