Last active
June 1, 2016 18:42
-
-
Save jsonberry/f0231645f3f7bf544d9fb4a1858bb720 to your computer and use it in GitHub Desktop.
Hero image + overlay + centered content (with adjustable vertical height)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// These styles can help you get a hero image with an overlay as well as centered content placement | |
/* Example markup | |
<div id='hero-image'> | |
<div id='hero-overlay'></div> | |
</div> | |
<div id='hero-content'> | |
<p>Look ma, no hands!</p> | |
</div> | |
*/ | |
// Enter the correct path for the image on line 14, you can adjust the height here if needed (be sure to match the overlay height) | |
#hero-image { | |
background: url('hero-image.jpg') no-repeat center center fixed; | |
background-size: cover; | |
height: 100vh; | |
} | |
// Change opacity or color, just make sure the height remains the same as the hero-image height | |
#hero-overlay { | |
height: 100vh; | |
background-color: #000000; | |
opacity: .30; | |
} | |
// This will give you centered content items; adjust the height to change the vertical placement of the items | |
#hero-content { | |
height: 50vh; | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
text-align: center; | |
display: flex; | |
justify-content: center; | |
align-items: flex-end; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment