Background Fill

In this example below you will see how to do a Background Fill with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by seank-com, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright seank-com ©
  • HTML
  • CSS
  • JavaScript
    <img id="map" class="zeroed blah50" src="http://www.myonlinemaps.com/images/blank_map/1170431044usa-map-test-png.png"><button class="upbutton" id="up">+</button><button class="downbutton" id="down">-</button><div class="percent" id="percent">50%</div>

/*Downloaded from https://www.codeseek.co/seank-com/background-fill-yYryVB */
    .zeroed {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 600px;
  height: 480px;
}
.percent {
  position: absolute;
  top: 180px;
  left: 0px;
  width: 600px;
  font-size: 80pt;
  text-align: center;
}
.upbutton {
  position: absolute;
  top: 100px;
  left: 620px;
}
.downbutton {
  position: absolute;
  top: 380px;
  left: 620px;
}
.blah100 {
  background: rgba(255,0,0,1);
}
.blah90 {
  background: rgba(255,255,255,1);
  background: linear-gradient(
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 10%,
    rgba(0,0,255,1) 10%,
    rgba(0,0,255,1) 11%, 
    rgba(255,0,0,1) 11%,
    rgba(255,0,0,1) 100%);
}
.blah80 {
  background: rgba(255,255,255,1);
  background: linear-gradient(
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 20%,
    rgba(0,0,255,1) 20%,
    rgba(0,0,255,1) 21%, 
    rgba(255,0,0,1) 21%,
    rgba(255,0,0,1) 100%);
}
.blah70 {
  background: rgba(255,255,255,1);
  background: linear-gradient(
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 30%,
    rgba(0,0,255,1) 30%,
    rgba(0,0,255,1) 31%, 
    rgba(255,0,0,1) 31%,
    rgba(255,0,0,1) 100%);
}
.blah60 {
  background: rgba(255,255,255,1);
  background: linear-gradient(
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 40%,
    rgba(0,0,255,1) 40%,
    rgba(0,0,255,1) 41%, 
    rgba(255,0,0,1) 41%,
    rgba(255,0,0,1) 100%);
}
.blah50 {
  background: rgba(255,255,255,1);
  background: linear-gradient(
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 50%,
    rgba(0,0,255,1) 50%,
    rgba(0,0,255,1) 51%, 
    rgba(255,0,0,1) 51%,
    rgba(255,0,0,1) 100%);
}
.blah40 {
  background: rgba(255,255,255,1);
  background: linear-gradient(
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 60%,
    rgba(0,0,255,1) 60%,
    rgba(0,0,255,1) 61%, 
    rgba(255,0,0,1) 61%,
    rgba(255,0,0,1) 100%);
}
.blah30 {
  background: rgba(255,255,255,1);
  background: linear-gradient(
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 70%,
    rgba(0,0,255,1) 70%,
    rgba(0,0,255,1) 71%, 
    rgba(255,0,0,1) 71%,
    rgba(255,0,0,1) 100%);
}
.blah20 {
  background: rgba(255,255,255,1);
  background: linear-gradient(
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 80%,
    rgba(0,0,255,1) 80%,
    rgba(0,0,255,1) 81%, 
    rgba(255,0,0,1) 81%,
    rgba(255,0,0,1) 100%);
}
.blah10 {
  background: rgba(255,255,255,1);
  background: linear-gradient(
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 90%,
    rgba(0,0,255,1) 90%,
    rgba(0,0,255,1) 91%, 
    rgba(255,0,0,1) 91%,
    rgba(255,0,0,1) 100%);
}
.blah0 {
  background: rgba(255,255,255,1);
}


/*Downloaded from https://www.codeseek.co/seank-com/background-fill-yYryVB */
    $(function () {
  $("#up").click(function() {
    var $map = $("#map"), p;
    for(p = 90;p >= 0; p -= 10) {
      if ($map.hasClass("blah" + p)) {
        $map.removeClass("blah" + p);
        $map.addClass("blah" + (p + 10));
        $("#percent").text((p + 10) + "%");
        return;
      }
    }
  });
  $("#down").click(function() {
    var $map = $("#map"), p;
    for(p = 10;p <= 100; p += 10) {
      if ($map.hasClass("blah" + p)) {
        $map.removeClass("blah" + p);
        $map.addClass("blah" + (p - 10));
        $("#percent").text((p - 10) + "%");
        return;
      }
    }
  });
});

Comments