Background image with grid for text over the top

Question

I need to make this grid the same height as the video. The video is in the background. The grid on top is to help position the text on top of the video.

Here is the CSS for the grid:

.grid-container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  max-width: 100%;
  margin: 0;
  z-index: 2;
  position: relative;
}

.grid-item {
  background-color: none;
  border: 1px solid #fff;
  font-size: 30px;
  color: white;
}


/* And this the CSS for the video: */

#myVideo {
  position: relative;
  left: 0;
  top: 0;
  max-width: 100%;
  height: auto;
  z-index: 1;
}

Hi and Welcome to SO. please take the [tour](https://stackoverflow.com/tour) first. Then read [how to ask questions here](https://stackoverflow.com/help/how-to-ask). After you have done that, edit your question to meet those guidelines and to include a [minimal, reproduciable code snippet](https://stackoverflow.com/help/minimal-reproducible-example) — tacoshy, Jun 21 '21 at 20:34
I need the z-index so that the video is behind the grid. The grid needs to be on top of the image and the same height as the image, the height is where I am struggling — cailin-alcock, Jun 21 '21 at 20:38
you are aware that you can wrap the video in a container and use `object-fit: contain;` to maintain the videos aspect ratio?. then palce the grid-inside the container aswell. Then simply use `position: relative;` on the container and `position: absolute; inset: 0;` on the grid. — tacoshy, Jun 21 '21 at 20:39
Thank you! Let me try that. I am new to code. Still learning everything. — cailin-alcock, Jun 21 '21 at 20:43

tacoshy · Answer 1 · 2021-06-21T21:17:19.217

Lets go step for step. There are multiple different "techniques" we need to use.

First we need a container (div#myVideo). The container we give the property and value: object-fit: contain;. This will make the container maintain the videos aspect ratio (also works for images). So it will resizes the height in this case to maintain the videos aspect ratio while it's width adepts to the given width of the viewport.

Then we give the same container the property and value position: relative; this will be necessary for the grid.

Lets move on to the video:

The video we give the property and value: width: 100%;. This will make the video fit the viewport width. the height is adepting to maintain it's aspect ratio (see above).

The grid:

The grid needs a higher z-index then the video to be placed on top of it (layer-wise). Also we give it the property and value: position: absolute; inset: 0; (inset: 0; is a syntax for top, right, bottom, left: 0; however it is just not fully supported by all browsers yet). This will make the grid span the entire container width and height (which equals the videos width and height as explained above).

Finally a sidenote:

I changed a few of your lines to be more effectiv.

grid-template-columns: 33.33% 33.33% 33.33%; => grid-template-columns: repeat(3, 1fr);

repeat(3, 1fr); will create 3 columns with an equal width of 1fr means exactly 1/3 in this case. If you change the 3 to a 4, then this would equal 25%.

Then I removed your border: 1px solid white; and changed it to box-shadow:0 0 0 1px white; in combination with the parents grid-gap: 1px; it will emulate a "border-collapse" and your border will be an actual 1px and not 2px (reference)

#myVideo {
  object-fit: contain; /* sizes the container to maintain the videos aspect ratio */
  position: relative;
}

#myVideo > video {
  width: 100%; /* making sure that the video doesnt overflow the viewport (horizontally) */
  z-index: 1;
}

.grid-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  color: white;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1px; /* emulates a bordercollapse */
}

.grid-item {
  background-color: none;
  box-shadow:0 0 0 1px white; /* emulates a border-collapse */
  font-size: 30px;
  color: white;
}

/* for styling purpose only */
body {
  margin: 0;
}

<div id="myVideo">
  <video src="https://www.tacoshy.de/stackoverflow/testvideo.mp4" autoplay></video>
  <div class="grid-container">
    <div class="grid-item"></div>
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
    <div class="grid-item">7</div>
  </div>
</div>

@cailin-alcock glad that it solves your question. Would you mind to up-vote and check it as an answer then? — tacoshy, Jun 22 '21 at 07:11

Background image with grid for text over the top

1 Answers1