What Is The Css Rule To Set Background Color

If you desire to engage first-fourth dimension visitors on your website, yous have about 10 to 20 seconds. To inject some life into your page content, yous might want to try adding a background video with CSS.

person using a laptop to create a video background with html and css

Video backgrounds have up the unabridged width and height of the viewport (in other words, the visible page area) and add some visual flair to boost appointment. Over this video, y'all can place your featured folio content — after all, information technology is just a background, and your content is about important.

Download Now: Free HTML & CSS Hacks

Video backgrounds may seem like a fancy feature, just they're actually easy to implement if you know some CSS. In this guide, we'll bear witness yous how to add a simple fullscreen video background to your webpage, which y'all can tweak and accommodate to your needs.

How to Create a Fullscreen Video Background With CSS

To show you lot how to create video backgrounds for your site, we'll share some lawmaking that you tin can copy to modify for your needs. We'll also see the code in activity with some responsive video background CodePen modules.

Permit's outset with our HTML. Offset, nosotros'll place a video on our page 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" type="video/mp4">
</video>

All of these attributes are of import for the background to work as intended, so permit's get through each one:

The id attribute is for styling our video chemical element with CSS. This is necessary to achieve the fullscreen background result.
The autoplay attribute starts the video automatically once the folio loads.
The loop aspect plays the video in an infinite loop.
The muted aspect turns off sound for the video. Generally, yous shouldn't play video sound on your page unless the user turns on audio. Doing so is an accessibility upshot and tin make for an unpleasant user experience.
Finally, the poster image 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 poster prototype the first frame of your video for the smoothest await.

<video> tags commonly include the controls attribute equally well. However, we've left information technology out because we don't want users pausing the video or skipping around.

After our video element, permit'due south add some HTML filler content to run into how text appears against our video background.

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

With the HTML done, let'due south handle the CSS business. To turn our normal video into a background video, add the following CSS:

                              
#groundwork-video {
  width: 100vw;
  meridian: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  peak: 0;
  lesser: 0;
  z-index: -i;
}

Let's go through each of these rules to empathize what they practice:

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

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

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

At this indicate, the video background will brandish nicely. Just, we haven't accounted for mobile devices all the same. Information technology's commonly a good idea to foreclose 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 place.

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

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

When we combine everything, we become a sleek video background that scales with the screen and displays an paradigm on mobile devices. (Annotation: Click here to meet the instance with the video playing.)

See the Pen Video Background 1 by Christina Perricone (@hubspot) on CodePen.

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

Add together More Page Content

We've already put some headings on the page to come across how content looks confronting a video background.

Still, your page will probably contain more content than a video background and some title text. So, let'southward add a <chief> section to our example that appears when the user scrolls downwards. This element volition encompass the video to bring the focus to your main content. (Note: Click hither to run across the instance with the video playing.)

Encounter the Pen Video Background 2 by Christina Perricone (@hubspot) on CodePen.

We've given our <main> element a groundwork color to cover up the video, as well every bit a peak margin in viewport meridian units. This way, the main content will announced as soon as the user starts scrolling.

A CSS Video Background to Engage Your Audience

Life is short, and nobody wants to waste material their time on a run-of-the-mill webpage. With just a few lines of CSS, we've created a full-page video background template that yous can customize for your audience.

Using a site's groundwork for a video might not exist the ideal pick for every website, and are commonly a no-go on mobile websites due to their impact on mobile operation. However, if done well, video backgrounds can make quite an touch on, and there'south no need to even push play.

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

New Call-to-action