Removing footer in HTML/CSS-CodePudding

I have this code:

new WOW().init();

/* AUTHOR LINK */
$('.about-me-img img, .authorWindowWrapper').hover(function() {
  $('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('trans');
}, function() {
  //$('.authorWindowWrapper').stop().css('display', 'none').find('p').removeClass('trans');
});

body {
  font-family: Open Sans, "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-size: 13px;
  background-color: #000000 !important;
  background-size: cover;
  margin: 0;
  height: 100%;
  background-image: url("https://media.istockphoto.com/photos/programming-source-code-on-digital-screen-software-developer-and-picture-id1336271758?b=1&k=20&m=1336271758&s=170667a&w=0&h=HoJqtqo1r54eZf9G4OqBXRHXLsYoD0X9wMR-vXFBiTE=");
}

.overlayE {
  position: absolute;
  width: 100%;
  height: 100% !important;
  margin: 0;
  padding: 0;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.886);
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
  font-size: 13px;
  direction: ltr;
}

.sectionClass1 {
  padding: 80px 0px 50px 0px;
  position: relative;
  display: block;
}

.row {
  width: 980px;
  height: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.row:before,
.row:after {
  content: "";
  display: table;
}

.sectiontitle {
  background-position: center;
  text-align: center;
  min-height: 20px;
}

.sectiontitle h2 {
  font-size: 30px;
  color: #222;
  margin-bottom: 0px;
  padding-right: 10px;
  padding-left: 10px;
}

.headerLine {
  width: 160px;
  height: 2px;
  display: inline-block;
  background: #101F2E;
}

.fullWidth {
  width: 100%;
  display: table;
  float: none;
  padding: 0;
  min-height: 1px;
  height: 100%;
  position: relative;
}


/********************************/


/*  SECTION WORK EXPERIENCE
  ********************************/

#work-experience .sectiontitle .headerLine {
  width: 280px;
}

#work-experience .headerline {
  width: 280px;
}

.cbp_tmtimeline {
  margin: 60px 30px 0 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.cbp_tmtimeline:before {
  content: '';
  position: absolute;
  top: 3%;
  bottom: 0;
  width: 10px;
  background: #324454;
  left: 13%;
  height: 100%;
}

.cbp_tmtimeline li:last-child:before {
  content: initial;
}

.cbp_tmtimeline>li .cbp_tmtime {
  display: block;
  width: 25%;
  padding-right: 100px;
  position: absolute;
}

.cbp_tmtimeline>li .cbp_tmtime span {
  display: block;
  text-align: right;
}

.cbp_tmtimeline>li .cbp_tmtime span:first-child {
  font-size: 0.9em;
  color: #bdd0db;
}

.cbp_tmtimeline>li .cbp_tmtime span:last-child {
  font-size: 2.9em;
  color: #3594cb;
}

.cbp_tmtimeline>li:nth-child(odd) .cbp_tmtime span:last-child {
  color: #6cbfee;
}

.cbp_tmtimeline>li .cbp_tmlabel {
  margin: 0 0 15px 25%;
  background: rgba(50, 68, 84, 1);
  color: #FFF;
  padding: 30px;
  font-size: 1.2em;
  font-weight: 300;
  line-height: 1.4;
  font-family: 'Open Sans';
  position: relative;
  border-radius: 5px;
  min-height: 150px;
}

.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
  background: #2B3A48;
}

.cbp_tmtimeline>li .cbp_tmlabel h3 {
  margin-top: 0px;
  color: white;
  font-size: 20px;
  margin-bottom: 5px;
  padding: 0 0 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
}

.cbp_tmtimeline>li .cbp_tmlabel h4 {
  opacity: 0.7;
  color: rgba(255, 255, 255, 1);
  letter-spacing: 0px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  line-height: 1.2em;
  font-weight: 600;
  padding: 0;
  padding-bottom: 10px;
  margin: 0;
  text-align: left;
}

.cbp_tmtimeline>li .cbp_tmlabel h4 i {
  margin-right: 5px;
  vertical-align: middle;
}

.cbp_tmtimeline>li .cbp_tmlabel:after {
  right: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-right-color: rgba(50, 68, 84, 1);
  border-width: 10px;
  top: 70px;
}

.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
  border-right-color: #2B3A48;
}

.cbp_tmtimeline>li .cbp_tmicon {
  width: 150px;
  height: 150px;
  top: 3%;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  font-size: 1.4em;
  line-height: 40px;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  color: #151515;
  background: #324454;
  border-radius: 50%;
  text-align: center;
  left: 8%;
  margin: 0 0 0 -25px;
}

.cbp_tmtimeline li {
  margin-bottom: 70px;
  position: relative;
}

.sectionClassProject {
  position: relative;
  display: block;
  /* background: #f7f7f7; */
  margin: 0 auto;
  padding: 80px 1.875em 3.125em;
}

.projectParagraph {
  font-size: 18px;
  margin: 0.5em 0 0;
  font-family: 'Source Sans Pro', serif;
}

.projectParagraphLink {
  font-size: 15px !important;
  font-weight: 500 !important;
  margin-top: 50px !important;
  margin-bottom: 0px;
  text-align: right;
}

.projectParagraphLink a {
  color: white;
  text-decoration: underline;
}

.cbp_tmicon img {
  width: 100%;
}

.faPra {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 70px;
  vertical-align: middle;
  color: white;
  line-height: 150px;
}

.label {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  color: #FFFFFF;
  display: inline;
  font-size: 12px;
  font-weight: bold;
  margin-right: 10px;
  padding: 5px 15px;
}

.date {
  color: #BFC3C7;
  display: block;
  font-size: 14px;
  font-weight: 600;
  position: absolute;
  top: 30px;
  right: 20px;
}

.date i {
  margin-right: 8px;
  vertical-align: top;
  font-size: 18px;
  line-height: 20px;
}

@media (max-width: 1024px) {
  .cbp_tmtimeline:before {
    display: none;
  }
  .cbp_tmtimeline>li .cbp_tmtime {
    width: 100%;
    position: relative;
    padding: 0 0 20px 0;
  }
  .cbp_tmtimeline>li .cbp_tmtime span {
    text-align: left;
  }
  .cbp_tmtimeline>li .cbp_tmlabel {
    margin: 30px 0 70px 0;
    padding: 50px 30px 30px 30px;
    font-weight: 400;
    font-size: 95%;
    float: left;
  }
  .cbp_tmtimeline>li .cbp_tmlabel:after {
    right: auto;
    border-right-color: transparent;
    border-bottom-color: rgb(50, 68, 84);
    top: -20px;
  }
  .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
    border-right-color: transparent;
    border-bottom-color: rgb(43, 58, 72);
    left: 65px;
  }
  .cbp_tmtimeline>li:nth-child(even) .cbp_tmlabel:after {
    right: 65px;
  }
  .cbp_tmtimeline>li:nth-child(odd) .cbp_tmicon {
    position: relative;
    float: left;
    left: auto;
    margin: 0px 5px 0 0px;
  }
  .cbp_tmtimeline>li:nth-child(even) .cbp_tmicon {
    position: relative;
    float: right;
    left: auto;
    margin: 0px 5px 0 0px;
  }
  .cbp_tmtimeline>li .cbp_tmtime span:last-child {
    font-size: 1.5em;
  }
}

@media (max-width: 32em) {
  .cbp-ntaccordion {
    font-size: 70%;
  }
}

<link rel="stylesheet" href="experience.css">
<script src="experience.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source Sans Pro:400,700,900&amp;amp" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open Sans:400,700&amp;subset=latin,latin-ext" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

<div ></div>

<div id="workexperience">
  <div >
    <div >
      <h2>Work experience</h2>
      <span ></span>
    </div>
    <ul >
      <li>
        <div >
          <i ></i>
        </div>
        <div >
          <h3>Web developer</h3>
          <div >
            <i ></i>April 2014 - Current
          </div>
          <h4><i ></i>Davic Company, Bratislava</h4>
          <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit obcaecati ipsa quae, iusto laudantium qui, nisi eum modi perspiciatis quasi facilis corporis iure soluta enim incidunt itaque aspernatur sequi tempora.</p>
        </div>
      </li>
      <li>
        <div >
          <i ></i>
        </div>
        <div >
          <h3>Web designer</h3>
          <h4><i ></i>Fannous Company, Prague</h4>
          <div ><i ></i>June 2012 - April 2014</div>
          <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt quasi perspiciatis, aliquid sed maiores accusamus. Adipisci quidem nostrum quos quae doloremque esse a, ipsum earum, recusandae omnis dignissimos et sint.</p>
        </div>
      </li>
      <li>
        <div >
          <i ></i>
        </div>
        <div >
          <h3>Web designer</h3>
          <h4><i ></i>Techixs Company, London</h4>
          <div ><i ></i>November 2009 - June 2012</div>
          <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla labore atque alias ipsa, nam quod rerum repellat cumque, aliquam sequi vitae voluptatibus cum soluta incidunt tempore accusamus eius sed excepturi!Lorem ipsum dolor sit amet, consectetur
            adipisicing elit. Tempora natus veritatis aperiam repellendus dolor vel, expedita assumenda eos, mollitia quae ullam esse voluptas vero. Dolores culpa eaque vitae eum quibusdam?</p>

        </div>
      </li>
      <li>
        <div >
          <i ></i>
        </div>
        <div >
          <h3>Freelancer</h3>
          <div ><i ></i>Januar 2006 - November 2009</div>
          <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse iusto, possimus hic at quisquam, incidunt illo asperiores et nobis, qui nulla consequatur molestiae quibusdam expedita dignissimos? Iste eum velit quos.</p>
        </div>
      </li>
    </ul>
  </div>
</div>

If you run the code, and open it on new page, there is a different background at the end of the page, I would like to remove that and merge it with the dark background I have. How can I extend the dar background to the full page? I would just like the blueish background near the end of the page to be removed.

Edit: enter image description here

CodePudding user response：

You can set the overflow-y on the body to scroll and still use the fixed background

new WOW().init();

/* AUTHOR LINK */
$('.about-me-img img, .authorWindowWrapper').hover(function() {
  $('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('trans');
}, function() {
  //$('.authorWindowWrapper').stop().css('display', 'none').find('p').removeClass('trans');
});

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Open Sans, "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-size: 13px;
  background-color: #000000 !important;
  background-size: cover;
  margin: 0;
  height: 100%;
  overflow-y: scroll;
  background-image: url("https://media.istockphoto.com/photos/programming-source-code-on-digital-screen-software-developer-and-picture-id1336271758?b=1&k=20&m=1336271758&s=170667a&w=0&h=HoJqtqo1r54eZf9G4OqBXRHXLsYoD0X9wMR-vXFBiTE=");
}

.overlayE {
  position: fixed;
  width: 100%;
  height: 100% !important;
  margin: 0;
  padding: 0;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.886);
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
  font-size: 13px;
  direction: ltr;
}

.sectionClass1 {
  padding: 80px 0px 50px 0px;
  position: relative;
  display: block;
}

.row {
  width: 980px;
  height: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.row:before,
.row:after {
  content: "";
  display: table;
}

.sectiontitle {
  background-position: center;
  text-align: center;
  min-height: 20px;
}

.sectiontitle h2 {
  font-size: 30px;
  color: #222;
  margin-bottom: 0px;
  padding-right: 10px;
  padding-left: 10px;
}

.headerLine {
  width: 160px;
  height: 2px;
  display: inline-block;
  background: #101F2E;
}

.fullWidth {
  width: 100%;
  display: table;
  float: none;
  padding: 0;
  min-height: 1px;
  height: 100%;
  position: relative;
}


/********************************/


/*  SECTION WORK EXPERIENCE
  ********************************/

#work-experience .sectiontitle .headerLine {
  width: 280px;
}

#work-experience .headerline {
  width: 280px;
}

.cbp_tmtimeline {
  margin: 60px 30px 0 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.cbp_tmtimeline:before {
  content: '';
  position: absolute;
  top: 3%;
  bottom: 0;
  width: 10px;
  background: #324454;
  left: 13%;
  height: 100%;
}

.cbp_tmtimeline li:last-child:before {
  content: initial;
}

.cbp_tmtimeline>li .cbp_tmtime {
  display: block;
  width: 25%;
  padding-right: 100px;
  position: absolute;
}

.cbp_tmtimeline>li .cbp_tmtime span {
  display: block;
  text-align: right;
}

.cbp_tmtimeline>li .cbp_tmtime span:first-child {
  font-size: 0.9em;
  color: #bdd0db;
}

.cbp_tmtimeline>li .cbp_tmtime span:last-child {
  font-size: 2.9em;
  color: #3594cb;
}

.cbp_tmtimeline>li:nth-child(odd) .cbp_tmtime span:last-child {
  color: #6cbfee;
}

.cbp_tmtimeline>li .cbp_tmlabel {
  margin: 0 0 15px 25%;
  background: rgba(50, 68, 84, 1);
  color: #FFF;
  padding: 30px;
  font-size: 1.2em;
  font-weight: 300;
  line-height: 1.4;
  font-family: 'Open Sans';
  position: relative;
  border-radius: 5px;
  min-height: 150px;
}

.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
  background: #2B3A48;
}

.cbp_tmtimeline>li .cbp_tmlabel h3 {
  margin-top: 0px;
  color: white;
  font-size: 20px;
  margin-bottom: 5px;
  padding: 0 0 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
}

.cbp_tmtimeline>li .cbp_tmlabel h4 {
  opacity: 0.7;
  color: rgba(255, 255, 255, 1);
  letter-spacing: 0px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  line-height: 1.2em;
  font-weight: 600;
  padding: 0;
  padding-bottom: 10px;
  margin: 0;
  text-align: left;
}

.cbp_tmtimeline>li .cbp_tmlabel h4 i {
  margin-right: 5px;
  vertical-align: middle;
}

.cbp_tmtimeline>li .cbp_tmlabel:after {
  right: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-right-color: rgba(50, 68, 84, 1);
  border-width: 10px;
  top: 70px;
}

.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
  border-right-color: #2B3A48;
}

.cbp_tmtimeline>li .cbp_tmicon {
  width: 150px;
  height: 150px;
  top: 3%;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  font-size: 1.4em;
  line-height: 40px;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  color: #151515;
  background: #324454;
  border-radius: 50%;
  text-align: center;
  left: 8%;
  margin: 0 0 0 -25px;
}

.cbp_tmtimeline li {
  margin-bottom: 70px;
  position: relative;
}

.sectionClassProject {
  position: relative;
  display: block;
  /* background: #f7f7f7; */
  margin: 0 auto;
  padding: 80px 1.875em 3.125em;
}

.projectParagraph {
  font-size: 18px;
  margin: 0.5em 0 0;
  font-family: 'Source Sans Pro', serif;
}

.projectParagraphLink {
  font-size: 15px !important;
  font-weight: 500 !important;
  margin-top: 50px !important;
  margin-bottom: 0px;
  text-align: right;
}

.projectParagraphLink a {
  color: white;
  text-decoration: underline;
}

.cbp_tmicon img {
  width: 100%;
}

.faPra {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 70px;
  vertical-align: middle;
  color: white;
  line-height: 150px;
}

.label {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  color: #FFFFFF;
  display: inline;
  font-size: 12px;
  font-weight: bold;
  margin-right: 10px;
  padding: 5px 15px;
}

.date {
  color: #BFC3C7;
  display: block;
  font-size: 14px;
  font-weight: 600;
  position: absolute;
  top: 30px;
  right: 20px;
}

.date i {
  margin-right: 8px;
  vertical-align: top;
  font-size: 18px;
  line-height: 20px;
}

@media (max-width: 1024px) {
  .cbp_tmtimeline:before {
    display: none;
  }
  .cbp_tmtimeline>li .cbp_tmtime {
    width: 100%;
    position: relative;
    padding: 0 0 20px 0;
  }
  .cbp_tmtimeline>li .cbp_tmtime span {
    text-align: left;
  }
  .cbp_tmtimeline>li .cbp_tmlabel {
    margin: 30px 0 70px 0;
    padding: 50px 30px 30px 30px;
    font-weight: 400;
    font-size: 95%;
    float: left;
  }
  .cbp_tmtimeline>li .cbp_tmlabel:after {
    right: auto;
    border-right-color: transparent;
    border-bottom-color: rgb(50, 68, 84);
    top: -20px;
  }
  .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
    border-right-color: transparent;
    border-bottom-color: rgb(43, 58, 72);
    left: 65px;
  }
  .cbp_tmtimeline>li:nth-child(even) .cbp_tmlabel:after {
    right: 65px;
  }
  .cbp_tmtimeline>li:nth-child(odd) .cbp_tmicon {
    position: relative;
    float: left;
    left: auto;
    margin: 0px 5px 0 0px;
  }
  .cbp_tmtimeline>li:nth-child(even) .cbp_tmicon {
    position: relative;
    float: right;
    left: auto;
    margin: 0px 5px 0 0px;
  }
  .cbp_tmtimeline>li .cbp_tmtime span:last-child {
    font-size: 1.5em;
  }
}

@media (max-width: 32em) {
  .cbp-ntaccordion {
    font-size: 70%;
  }
}

<link rel="stylesheet" href="experience.css">
<script src="experience.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source Sans Pro:400,700,900&amp;amp" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open Sans:400,700&amp;subset=latin,latin-ext" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

<body>
  <div ></div>
  <div id="workexperience">
    <div >
      <div >
        <h2>Work experience</h2>
        <span ></span>
      </div>
      <ul >
        <li>
          <div >
            <i ></i>
          </div>
          <div >
            <h3>Web developer</h3>
            <div >
              <i ></i>April 2014 - Current
            </div>
            <h4><i ></i>Davic Company, Bratislava</h4>
            <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit obcaecati ipsa quae, iusto laudantium qui, nisi eum modi perspiciatis quasi facilis corporis iure soluta enim incidunt itaque aspernatur sequi tempora.</p>
          </div>
        </li>
        <li>
          <div >
            <i ></i>
          </div>
          <div >
            <h3>Web designer</h3>
            <h4><i ></i>Fannous Company, Prague</h4>
            <div ><i ></i>June 2012 - April 2014</div>
            <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt quasi perspiciatis, aliquid sed maiores accusamus. Adipisci quidem nostrum quos quae doloremque esse a, ipsum earum, recusandae omnis dignissimos et sint.</p>
          </div>
        </li>
        <li>
          <div >
            <i ></i>
          </div>
          <div >
            <h3>Web designer</h3>
            <h4><i ></i>Techixs Company, London</h4>
            <div ><i ></i>November 2009 - June 2012</div>
            <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla labore atque alias ipsa, nam quod rerum repellat cumque, aliquam sequi vitae voluptatibus cum soluta incidunt tempore accusamus eius sed excepturi!Lorem ipsum dolor sit amet,
              consectetur adipisicing elit. Tempora natus veritatis aperiam repellendus dolor vel, expedita assumenda eos, mollitia quae ullam esse voluptas vero. Dolores culpa eaque vitae eum quibusdam?</p>

          </div>
        </li>
      </ul>
    </div>
  </div>
</body>