background image as video in css

You can use the "background-video" property in CSS to set a video as the background image of an element. Here's an example:

HTML:

<div class="bg-video">
  <video autoplay loop muted>
    <source src="my-video.mp4" type="video/mp4">
  </video>
  <h1>Welcome to my website</h1>
</div>

CSS:

.bg-video {
  position: relative;
  height: 100vh;
  background-color: black;
  overflow: hidden;
}

.bg-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
}

.bg-video h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 3rem;
  z-index: 1;
}

In this example, we have a container element with the class "bg-video". Inside this container, we have a video element with the source of our video file. We also have a heading element that will appear on top of the video.

In the CSS, we set the position of the container to "relative" and give it a height of 100vh (viewport height). We also set the background color to black and hide any overflow.

For the video element, we set its position to "absolute" and use the "top", "left", and "transform" properties to center it within the container. We also set the "min-width" and "min-height" to 100% to ensure the video fills the entire container.

Finally, we add the heading element and position it on top of the video using "absolute" positioning and the same centering properties as the video element. We also give it a z-index of 1 to ensure it appears on top of the video