Let text float above Image?


#1

Hello,

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

Best regards,
nndr

Code:
css
.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;
}

html

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

#2

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


#3

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


#4

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


#5

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


#6

this is pretty trick, but possible, see here


#7

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