Skip to content

Instantly share code, notes, and snippets.

@starryeyez024
Last active November 19, 2017 02:59
Show Gist options
  • Select an option

  • Save starryeyez024/046af7924ad67101fae585263aa54c29 to your computer and use it in GitHub Desktop.

Select an option

Save starryeyez024/046af7924ad67101fae585263aa54c29 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<br/>
<div class="header">
<div class="video">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/52/Mount_Ellinor%2C_Mount_Washington_Panorama.jpg">
</div>
<h1>this is my title</h1>
<h2>this is my longer subhead with more text that probably wraps to a second line</h2>
</div>
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
.header {
position: relative;
border: red solid 1px;
padding: 50px 0;
width: 100%;
text-align: center;
}
.video {
position: absolute;
top: 0;
bottom: 0;
left: auto;
right: auto;
z-index:-1;
width: 100%;
background: #f0e8c1;
text-align: center;
overflow: hidden;
img {
position: absolute;
top: 0;
bottom: 0;
height: 100%;
left: -9999px;
right: -9999px;
margin: auto;
}
}
.header {
position: relative;
border: red solid 1px;
padding: 50px 0;
width: 100%;
text-align: center;
}
.video {
position: absolute;
top: 0;
bottom: 0;
left: auto;
right: auto;
z-index: -1;
width: 100%;
background: #f0e8c1;
text-align: center;
overflow: hidden;
}
.video img {
position: absolute;
top: 0;
bottom: 0;
height: 100%;
left: -9999px;
right: -9999px;
margin: auto;
}
<br/>
<div class="header">
<div class="video">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/52/Mount_Ellinor%2C_Mount_Washington_Panorama.jpg">
</div>
<h1>this is my title</h1>
<h2>this is my longer subhead with more text that probably wraps to a second line</h2>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment