Let text float above Image?



How can i manage to let my heading and button float above the Video in the background?

Best regards,

.main {

.main video {
width: 100%;
position: relative;

.main .content {
top: 200px;
width: 100%;
left: 0;
right: 0;
margin: 0 auto;

.main h1 {
font-size: 50px;
text-shadow: 0 2px 3px rgba(0,0,0,.4);
position: absolute;


<div class="main">      
      <video autoplay loop src="https://s3.amazonaws.com/codecademy-content/projects/excursion/bg.mp4"/>
      	<div class="content container">
<div class="supporting">
      <div class="container">
        <h1>Discover hidden places in the world around you</h1>
        <button type="button">Download Excursion</button>


there is no heading? above the video or overlay at the top of the video?


Sorry i forgot to copy it. :frowning: (its there now)


do you want the heading above the video or does the heading needs to overlay the top bit of the video?


i want the heading to be in the center of the video. (overlay)


this is pretty trick, but possible, see here


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.