In this article some premature notes and codes to become a collection of visual background options and interactive effect tactics for websites.
The basic background-images for an html-element in css
background-image: url( 'imagename.ext' );and for video display in a background:
<div class="vidContain">
<div class="vid">
<video> ... </video>
</div>
<div class="content"> ... The rest of your content ... </div>
</div>
.vidContain {
width:300px; height:200px;
position:relative;
display:inline-block;
margin:10px;
}
.vid {
position: absolute;
top: 0; left:0;
width: 100%; height: 100%;
z-index: -1;
}
.content {
position:absolute;
top:0; left:0;
background: black;
color:white;
}(video background source: stackoverflow.com)
There is a lot more that i will cover here when time permits to play and research these background options more over.