autonomic-cooperative/autonomic.zone
Archived
5
0
Fork 0
Code Issues 15 Pull Requests 2 Releases Activity

darken and blur header image

Browse Source
This commit is contained in:
czmj
2017-09-29 12:05:12 +01:00
parent 1e1bebee1b
commit b28da92339
4 changed files with 38 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/assets/styles/main.scss
View File

@ -50,12 +50,32 @@
> header {
@include padding(12em, 0);
@include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../assets/images/banner.jpg")'));
position: relative;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
> * {
position: relative;
z-index: 1;
}
.header-image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
z-index: 0;
filter: blur(3px) brightness(40%);
}
h2 {
font-size: 1.75em;
margin: 0 0 (_size(element-margin) * 0.25) 0;