LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Tinted Background Image via CSS

Perfect when you have multiple colors options for your theme - photo by George Doumani

CSS
a {
  color: #571abc;
  display: block;
  font-size: 11px;
  text-transform: uppercase;
}

section {
  height: 100%;
  width: 100%;
  font-family: "Open Sans", sans-serif;
  color: #fff;
  text-align: center;
  position: absolute;
  background-color: #8c55e7;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIyMCUiIHN0b3AtY29sb3I9IiNkNmEzZTEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhN2Q0ZWEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(20%, #d6a3e1), color-stop(100%, #a7d4ea));
  background-image: -webkit-linear-gradient(left top, #d6a3e1 20%, #a7d4ea 100%);
  background-image: linear-gradient(to right bottom, #d6a3e1 20%, #a7d4ea 100%);
  overflow: hidden;
}
section::before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.2;
  background-image: url("http://thorarinn.is/img/codepen.jpg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
section div.container {
  z-index: 10;
  text-align: center;
  padding-top: 2em;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
section h1,
section p,
section button {
  z-index: 10;
  position: relative;
}
section button.btn-primary {
  background-color: #8c55e7;
  border-color: #7d3fe4;
  text-transform: uppercase;
  font-family: "Economica", sans-serif;
  margin-top: 20px;
}
section button.btn-primary:hover {
  background-color: #7d3fe4;
  border-color: #7d3fe4;
}
section p {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  font-size: 1.2em;
}
section h1 {
  font-family: "Economica", sans-serif;
  font-weight: 700;
  font-size: 50px;
  line-height: 40px;
}
Host Instantly Drag and Drop Website Builder

 

Description

This could be use for a customizable theme for example where the user picks out the color himself.
Term
Mon, 11/27/2017 - 21:57

Related Codes

Pen ID
Pen ID
Pen ID