Skip to content

Instantly share code, notes, and snippets.

@mcgwier

mcgwier/index.html

Last active July 22, 2019 16:56
Show Gist options
  • Save mcgwier/be188ccfb116027d01a1fc21e67bda4d to your computer and use it in GitHub Desktop.
Save mcgwier/be188ccfb116027d01a1fc21e67bda4d to your computer and use it in GitHub Desktop.
Download ZIP
Vertically center content in a vh height div
Raw
index.html
<html>
<head>
<style type="text/css">
.fullwidth-header {
background-image: url(https://papermud.com/_playground/dashboard.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover !important;
height: 100vh;
background-color: #3422ce;
}
.fullwidth-header .overlay {
/* background-image: url(../images/overlay.png); */
background-repeat: repeat;
height: 100vh;
background: #3422cec4;
}
.container {
position: relative;
height: 100%;
}
.full-head-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.center {
text-align: center;
}
</style>
</head>
<body>
<div class="fullwidth-header">
<div class="overlay">
<div class="container">
<div class="full-head-content center">
<h1>This is your h1</h1>
<h2>This is your h2</h2>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment