How To Make Entire Background One Color Css

If you want to engage get-go-time visitors on your website, you lot take virtually x to xx seconds. To inject some life into your page content, you 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 take up the unabridged width and height of the viewport (in other words, the visible page area) and add together some visual flair to heave engagement. Over this video, you can place your featured page content — after all, it is just a background, and your content is near important.

Download Now: Free HTML & CSS Hacks

Video backgrounds may seem similar a fancy feature, but they're really like shooting fish in a barrel to implement if you know some CSS. In this guide, we'll show you lot how to add a unproblematic fullscreen video background to your webpage, which y'all can tweak and arrange to your needs.

How to Create a Fullscreen Video Background With CSS

To show you how to create video backgrounds for your site, nosotros'll share some code that you can re-create to modify for your needs. We'll as well see the code in action with some responsive video groundwork CodePen modules.

Let's start with our HTML. First, we'll identify a video on our page with the <video> tag and several attributes.

                              
<video id="groundwork-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 important for the background to work as intended, and so let'due south go through each one:

The id aspect is for styling our video chemical element with CSS. This is necessary to attain the fullscreen background result.
The autoplay attribute starts the video automatically once the page loads.
The loop attribute plays the video in an infinite loop.
The muted aspect turns off sound for the video. Generally, you lot shouldn't play video sound on your page unless the user turns on audio. Doing so is an accessibility event and can 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 affiche image the first frame of your video for the smoothest look.

<video> tags commonly include the controls attribute as well. Withal, we've left it out considering we don't want users pausing the video or skipping effectually.

After our video chemical element, let'south 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, let's handle the CSS business. To plough our normal video into a background video, add together the following CSS:

                              
#groundwork-video {
  width: 100vw;
  height: 100vh;
  object-fit: encompass;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  lesser: 0;
  z-index: -1;
}

Permit's become through each of these rules to understand what they exercise:

top: 100vw (viewport width) and width: 100vh (viewport height) brand the video extend to the total width and height of the viewport.
object-fit: cover automatically sizes the background video to keep 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 bottom position the video relative to the viewport and separates it from the rest of the folio content. This keeps the video in place when the user scrolls, and allows other content to sit on top of it.
z-index places the video groundwork under accompanying content.

Adjacent, we'll add some styling for our other page content. For accessibility, make sure text placed over video provides aplenty color dissimilarity with the groundwork:

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

At this indicate, the video background will brandish nicely. But, nosotros oasis't accounted for mobile devices withal. It's usually a good thought to prevent car-playing videos on mobile, since the information needed to play them is significant and users didn't request to play the video in the kickoff place.

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

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

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

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

If you demand more aid learning how to make this code work for your site, check out this CSS groundwork YouTube video tutorial:

Add More than Page Content

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

Still, your page will probably comprise more than content than a video background and some championship text. So, let'south add together a <master> section to our instance that appears when the user scrolls down. This element volition cover the video to bring the focus to your main content. (Note: Click here to see the instance with the video playing.)

Run into the Pen Video Groundwork two by Christina Perricone (@hubspot) on CodePen.

Nosotros've given our <main> chemical element a groundwork color to cover up the video, equally well as a pinnacle margin in viewport pinnacle 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 brusque, and nobody wants to waste their fourth dimension on a run-of-the-mill webpage. With merely a few lines of CSS, we've created a full-page video background template that you can customize for your audience.

Using a site's background for a video might non be the ideal choice for every website, and are normally a no-continue mobile websites due to their impact on mobile performance. All the same, if done well, video backgrounds tin can make quite an impact, and at that place's no demand to even push play.

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

New Call-to-action