Fixed Scroll Banner Image

Rumour has it she's a killer

by DigitalBiscuits

HTML

<script src="http://fonts.googleapis.com/css?family=Raleway:400,300,600"></script>
<div id="page-wrapper">
    <div id="banner">
        <div id="banner-text">
            <h1>Save The Girl</h1>
            <h2>Save The World</h2>
        </div>
    </div>
    <div id="content-wrapper">
        <div id="page-content">
            <h2>Rumour has it she's a <span class="red">Killer</span></h2>
            <p>Of on affixed civilly moments promise explain fertile in. Assurance advantage belonging happiness departure so of. Now improving and one sincerity intention allowance commanded not. Oh an am frankness be necessary earnestly advantage estimable extensive. Five he wife gone ye. Mrs suffering sportsmen earnestly any. In am do giving to afford parish settle easily garret.</p>
            
            <p>Sudden looked elinor off gay estate nor silent. Son read such next see the rest two. Was use extent old entire sussex. Curiosity remaining own see repulsive household advantage son additions. Supposing exquisite daughters eagerness why repulsive for. Praise turned it lovers be warmly by. Little do it eldest former be if.</p>
            
            <p>Unfeeling so rapturous discovery he exquisite. Reasonably so middletons or impression by terminated. Old pleasure required removing elegance him had. Down she bore sing saw calm high. Of an or game gate west face shed. no great but music too old found arose.</p>
            
            <p>Finished her are its honoured drawings nor. Pretty see mutual thrown all not edward ten. Particular an boisterous up he reasonably frequently. Several any had enjoyed shewing studied two. Up intention remainder sportsmen behaviour ye happiness. Few again any alone style added abode ask. Nay projecting unpleasing boisterous eat discovered solicitude. Own six moments produce elderly pasture far arrival. Hold our year they ten upon. Gentleman contained so intention sweetness in on resolving.</p>
            
            <p>Delightful...

CSS

body{
    font-size: 1em;
    font-family: 'Raleway', 'Segoe UI', Helvetica, sans-serif;
    font-weight: 400;
    color: #333;
}
h1{
    font-weight:300;
    font-size:4em;
    margin:0;
}
h2{
    font-weight:600;
    font-size:2em;
    margin:0 0 0.2em 0;
}

#page-wrapper{
    width:900px;
    margin:0 auto;
}
#banner{
    position: relative;
    height: 450px;
    padding:4em 0 0 1em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
    background-image: url('http://www.digitalbiscuits.co.uk/art/photography/Photography_29.jpg');
    background-attachment: fixed;
    background-position: 50% 0%;
    background-size: 720px;
    background-repeat:no-repeat;
}
#banner-text{
    max-width:65%;
    padding:1em 0 1em 6em;
    background-color:rgba(202, 42, 38, 0.3);
    color:#fff;
}
#content-wrapper{
    padding:1.75em 2em;
}
#page-content{
    padding-top:1.2em;
    border-top: 2px dotted #ddd;
    columns:100px 3;
    -webkit-columns:auto 3;
    -moz-columns:auto 3;
}

.red{
    text-transform:uppercase;
    font-weight:800;
    color:#ca2a26;
    transition: all 0.2s ease-in-out;
}
.red:hover{
    color:red;
    transition: all 0.2s ease-in-out;
}