CSS

body, html {
    height: 100%;
    margin: 0;
    font-size: 16px;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    line-height: 1.8em;

}

.overlay {
    background-color: #000;
    opacity: 0.5;
    position: absolute;
    background-position: 50% 50%;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 100%;
    z-index: 1;
}


.linkdark {
    display: inline-block;
    padding: 0.8em 0.3em;
    color: #fa9646;border: 1px solid #000;
    color: #000;
    text-transform: uppercase;
    font-size: 14px;
    width: 200px;
    text-align: center;
    transition: 0.5s;
}
.linkdark:hover {
    background: #000;
    color: #fff; }

.ptextdark p

{ letter-spacing: 0px; color: #000; }

.ptextdark {
    position: absolute;
    top: 30%;
    width: 100%;
    text-align: center;
    color: #000;
    font-size: 50px;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.biggerbannertextdark{
    font-size: 55px;
    margin-bottom: 1em;
    font-weight: 100;
    line-height: 1.1;
}

.ptextdark .border {
    background-color: #fff;
    color: #000;
    padding: 20px;
}

a { text-decoration: none; }

.link {
    display: inline-block;
    padding: 0.8em 0.3em;
    color: #fa9646;border: 1px solid #fff;
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    width: 200px;
    text-align: center;
    transition: 0.5s;
}

a:hover { transition: 0.5s; }

.link:hover {
    background: #fff;
    color: #000; }

.cover-image, .cover-image2, .cover-image3, .cover-image4, .cover-image5{
    position:relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    top: 0px;
}

.ptext {
    position: absolute;
    top: 35%;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 50px;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.ptextdark a {
    letter-spacing: 0px;
}

.ptext a {
    letter-spacing: 0px;
}

.biggerbannertext{
    font-size: 55px;
    margin-bottom: 1em;
    font-weight: 100;
    line-height: 1.1;
}

.ptext .border {
    background-color: #111;
    color: #fff;
    padding: 20px;
}

.cover-image {
    width: 100%;
    height: 100%;
    position: relative;
    background:url(http://ilovedturkeytwizzlers.uk/images/slideshow/homepage/world_map.jpg) fixed 50%/cover;  }

.cover-image5 {
    width: 100%;
    height: 100%; /* gives the effect a bit of room to breathe */
    position: relative;
    background: url(https://i.imgur.com/3Z9m5fQ.jpg) fixed 50%/cover; /* This is the bottom image, blurred and grayscaled. Could also use filters to do this + another pseudoel, but is less performant. */
    transition: background-image 100ms linear;
}

.cover-image2 {
    width: 100%;
    min-height: 100%; /* gives the effect a bit of room to breathe */
    position: relative;
    background: url(http://www.led-flex.co.uk/media/wysiwyg/parallex/led2.jpg) fixed 50%/cover; /* This is the bottom image, blurred and grayscaled. Could also use filters to do this + another pseudoel, but is less performant. */
}

.cover-image3 {
    width: 100%;
    min-height: 100%; /* gives the effect a bit of room to breathe */
    position: relative;
    background: url(http://www.led-flex.co.uk/media/wysiwyg/parallex/led5.jpg) fixed 50%/cover; /* This is the bottom image, blurred and grayscaled. Could also use filters to do this + another pseudoel, but is less performant. */
}

.cover-image4 {
    width: 100%;
    min-height: 100%; /* gives the effect a bit of room to breathe */
    position: relative;
    background: url(http://www.led-flex.co.uk/media/wysiwyg/parallex/led1.jpg) fixed 50%/cover; /* This is the bottom image, blurred and grayscaled. Could also use filters to do this + another pseudoel, but is less performant. */
}


.cover-image5:after {
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    background: inherit;
    background-image: url(http://www.led-flex.co.uk/media/wysiwyg/parallex/led6.jpg);
    mask: linear-gradient(to bottom, black 20%, transparent); /* Top image is masked with a gradient */
}

.cover-image6 {
    width: 100%;
    min-height: 100%; /* gives the effect a bit of room to breathe */
    position: relative;
    background: url(http://www.led-flex.co.uk/media/wysiwyg/parallex/led3.jpg) fixed 50%/cover; /* This is the bottom image, blurred and grayscaled. Could also use filters to do this + another pseudoel, but is less performant. */
}

HTML

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>CSS + Image Blur</title>
        <link rel="shortcut icon" href="">
        <link rel="stylesheet" href="styleboii.css">
    </head>

    <body>
<div class="cover-image"><div class="ptextdark">
                <p>PREMIUM LIGHTING</p>
                <div class="bannertextdark">
                    DELIVERED GLOBALLY
                </div>
                <a class="linkorange" href="http://www.led-flex.co.uk/profile.html">&nbsp;DISTRIBUTORS</a>
            </div></div>
<div class="cover-image2"><div class="overlay"></div></div>
<div class="cover-image3"></div>
<div class="cover-image4"><div class="overlay"></div></div>
<div class="cover-image5"></div>
<div class="cover-image6"><div class="overlay"></div></div>

    </body>
</html>