Untitled

dabblet.css

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

html, body {
  height: 100%;  
  }
  
.box {
	height: 200%;
	padding-top: 50%;
	border: 6px solid green;
	}

.box {
	background: 
		radial-gradient(
			#222,
			red
			)
			top left fixed;
	}
.box+.box {
	background:
		radial-gradient(
			#222,
			lightblue
			)
			top left fixed;
	}	
.box+.box+.box {
	background:
		radial-gradient(
			#222,
			lightgreen
			)
			top left fixed;
	}
	
.content {
	height: 50%;
	width: 100%;
	top: 50%;
	position: absolute;
	background: rgba(0,0,0,1);
	border: 3px solid black;
	}

dabblet.html

<div class="box">
	<div class="content"></div>
</div>

<div class="box">
	<div class="content"></div>
</div>

<div class="box">
	<div class="content"></div>
</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}