Let’s look more at background. We can add video to the background. You can see examples of what this lesson is about on this site I created (and then stopped working on because my son wanted to make his own site).

Here’s my exact code. The image is the name “Lands Unknown.”

Above: everything is in a div for that part of the page. The image is the big name.

CSS: The video has a width of 100% . It goes clear across the screen no matter the screen size. The height automatically adjusts so that the screen is never squished weird.

Position we haven’t talked about. I don’t use it much. I must have had trouble getting it to be where I wanted it to be. Absolute tells it to stay put where you put it.

Z-index is relevant to backgrounds. The Z-index orders your layers. 0 is the bottom, 1 is next. Giving everything else something greater than 0 would have been enough, but I just used -1 to move it back. I could have used 1 instead of 5 for the image container. If you have two things in the same place, use Z-index to order your layers, bringing one in front of the other. The higher the number the more to the front it is. If you can’t see something on your page, maybe it’s hidden under something else!

Z-index is how you can scroll up a page and have the page look like it’s scrolling up under the menu at the top of the page.

Try adding a video background on a page.

Here’s this lesson.