CODEWITHSUNDEEP
htmlvideotextoverlayfullscreen
user2662335
user2662335

Reputation: 19

How would you add text over a full-screen background video in html?

i have a full screen image set in Html and want to add overlaying text.

my CSS looks like

 .video {
position: fixed;
left: 0px;
top: 0px;
z-index: -100;
min-height: 100%;
min-width: 1040px;
width: 100%;
height: auto;
/*overflow: hidden;*/

} 

.maintext {
color: #CCC;
z-index: 100;
font-size: 24px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-variant: small-caps;
font-weight: normal;

}

.rightcolumn {
    float: left;
width: 50%;

}

.leftcolumn {
float: left;
width: 40%;
margin-left: 10%;

}

i want my left and right columns to show over the video that is playing in the background. I have the video on a full screen loop in my html code.

All in all i ideally would want something that looks like this

http://www.joe-san.com/

Upvotes: 0

Views: 6648

Answers (2)

Michael Benin
Michael Benin

Reputation: 4332

z-index needs to be on relative or absolute positioned elements:

.maintext {
position: relative;
color: #CCC;
z-index: 100;
font-size: 24px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-variant: small-caps;
font-weight: normal;
}

Upvotes: 1

danielepolencic
danielepolencic

Reputation: 5173

I think you're on the right path and you probably forgot the height on both columns. Have a look at my code -> http://jsfiddle.net/uN7Db/

The trick is to make sure that both <html> and <body> elements stretch to 100% height. Once you're done with that you can style the video element in the background (like the one you wrote) and than you can continue writing your html like any other page.

Also, there is no need to declare height:auto in .video.

Upvotes: 0

Related Questions