New Site Header

by David Joseph Guzsik

HTML

<div id="header">
    <img src="http://djdavid98.eu/logo/FFF">
</div>
<div id=content>
    <h1>Title</h1>
    <p>Stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff</p>
    <p>Stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff</p>
    <p>Stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff</p>
    <p>Stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff</p>
    <p>Stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff</p>
    <p>Stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff</p>
    <p>Stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff</p>
</div>

CSS

body {
    margin: 0;
}
#header {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-image: linear-gradient(to bottom right, rgba(189, 114, 192, .9) 0%, rgba(95, 61, 121, .9) 100%), url('http://djdavid98.eu/img/tile.svg');
    background-size: auto, 8px;
    z-index: 1;
}
#header img {
    width: 75%;
    max-height: calc(100% - 50px);
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#content {
    position: relative;
    z-index: 2;
    margin-top: 100vh;
    background-color: #fff;
    padding: 10px;
    font-family: sans-serif;
}
#content h1 {
    text-transform: UPPERCASE;
    font-size: 1.6em;
    text-align: center;
    margin: 0 0 10px;
}