How To Change Background Image Height And Width In Css

If you want to engage first-time visitors on your website, yous take about x to 20 seconds. To inject some life into your folio content, you might want to endeavor 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 engagement. Over this video, you tin can place your featured page content — after all, it is simply a background, and your content is most important.

Download Now: Free HTML & CSS Hacks

Video backgrounds may seem like a fancy characteristic, but they're really easy to implement if yous know some CSS. In this guide, we'll show you how to add together a simple fullscreen video groundwork to your webpage, which you can tweak and suit to your needs.

How to Create a Fullscreen Video Groundwork With CSS

To show you how to create video backgrounds for your site, we'll share some code that you can re-create to alter for your needs. We'll as well come across the code in action with some responsive video background CodePen modules.

Let's start with our HTML. First, we'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://avails.codepen.io/6093409/river.mp4" blazon="video/mp4">
</video>

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

The id attribute is for styling our video element with CSS. This is necessary to reach the fullscreen background result.
The autoplay attribute starts the video automatically once the folio loads.
The loop attribute plays the video in an infinite loop.
The muted attribute turns off audio for the video. Generally, you shouldn't play video sound on your page unless the user turns on sound. Doing so is an accessibility issue and can brand for an unpleasant user feel.
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. Nosotros recommend making your affiche prototype the first frame of your video for the smoothest wait.

<video> tags commonly include the controls attribute as well. Yet, we've left it out because nosotros don't want users pausing the video or skipping around.

After our video chemical element, permit's add some HTML filler content to encounter how text appears confronting our video background.

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

With the HTML washed, permit's handle the CSS business. To plough our normal video into a background video, add the post-obit CSS:

                              
#background-video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  acme: 0;
  bottom: 0;
  z-index: -1;
}

Let's get through each of these rules to sympathise what they do:

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

Next, nosotros'll add some styling for our other page content. For accessibility, brand certain text placed over video provides ample color dissimilarity with the groundwork:

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

At this point, the video background will display nicely. But, nosotros haven't deemed for mobile devices still. It's ordinarily a skilful thought to prevent motorcar-playing videos on mobile, since the information needed to play them is significant and users didn't request to play the video in the first place.

Instead, we'll add a media query that substitutes the video with our poster epitome 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: cover;
    }
}

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

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

If yous need more aid learning how to make this lawmaking work for your site, check out this CSS groundwork YouTube video tutorial:

Add More than Page Content

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

Still, your folio will probably contain more content than a video background and some championship text. So, let'southward add a <master> section to our case that appears when the user scrolls down. This element will comprehend the video to bring the focus to your main content. (Notation: Click here to run into the example with the video playing.)

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

We've given our <main> element a background colour to cover up the video, as well as a top margin in viewport height units. This mode, the main content volition announced as soon as the user starts scrolling.

A CSS Video Groundwork to Engage Your Audience

Life is short, and nobody wants to waste matter their fourth dimension on a run-of-the-mill webpage. With only a few lines of CSS, we've created a full-folio video background template that you can customize for your audience.

Using a site's background for a video might non exist the ideal choice for every website, and are ordinarily a no-keep mobile websites due to their impact on mobile performance. However, if washed well, video backgrounds can make quite an touch, and there's no demand to even button play.

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

New Call-to-action