The first commented line is your dabblet’s title

dabblet.css

/** * The first commented line is your dabblet’s title *//** * The first commented line is your dabblet’s title */

body {	background-color: grey;}

.boom, .background-test {	width: 1440px;		height: 320px;	min-height: 320px;	overflow: scroll;					resize: both;	}

.boom {	background-color: silver;		background-repeat: no-repeat;	background-size: cover;	background-position: 50% 50%;	min-width: 200px;	min-height: 200px;	overflow: scroll;						resize: both;		position: relative;		background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTQ0MHB4IiBoZWlnaHQ9IjMyMHB4IiB2aWV3Qm94PSIwIDAgMTQ0MCAzMjAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE0NDAgMzIwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6IzAyNDU1NDt9LnN0MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8yXyk7fS5zdDJ7ZmlsbDojMDU0QjVGO30uc3Qze2ZpbGw6IzBBNEU1Qzt9LnN0NHtmaWxsOiMxMzVDNkI7fS5zdDV7ZmlsbDojMDU1MzY2O308L3N0eWxlPjx0aXRsZT5BcnRib2FyZCAxIGNvcHloZWFkZXItYmFja2dyb3VuZDwvdGl0bGU+PGc+PGcgaWQ9IkxheWVyXzFfMV8iPjxyZWN0IGNsYXNzPSJzdDAiIHdpZHRoPSIxNDQwIiBoZWlnaHQ9IjMyMCIvPjxnPjxkZWZzPjxyZWN0IGlkPSJTVkdJRF8xXyIgd2lkdGg9IjE0NDAiIGhlaWdodD0iMzIwIi8+PC9kZWZzPjxjbGlwUGF0aCBpZD0iU1ZHSURfMl8iPjx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzFfIiAgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7Ii8+PC9jbGlwUGF0aD48ZyBjbGFzcz0ic3QxIj48cmVjdCB4PSI4NTEuMiIgeT0iLTQ4Ny40IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjcwNzEgLTAuNzA3MSAwLjcwNzEgMC43MDcxIDQ3OC42NjA4IDczNy40Mzk4KSIgY2xhc3M9InN0MiIgd2lkdGg9IjU1Ni42IiBoZWlnaHQ9IjU1Ni42Ii8+PHJlY3QgeD0iLTI5MC41IiB5PSIxMDIuNSIgdHJhbnNmb3JtPSJtYXRyaXgoMC43MDcxIC0wLjcwNzEgMC43MDcxIDAuNzA3MSAtMjcyLjcxMjggMTAyLjYwMzYpIiBjbGFzcz0ic3QzIiB3aWR0aD0iNTU2IiBoZWlnaHQ9IjU1NiIvPjxyZWN0IHg9Ii0xMjMuNSIgeT0iLTUxNi41IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjcwNzEgLTAuNzA3MSAwLjcwNzEgMC43MDcxIDIxMy44OTU3IDM5LjM5NTkpIiBjbGFzcz0ic3Q0IiB3aWR0aD0iNTU2IiBoZWlnaHQ9IjU1NiIvPjxyZWN0IHg9IjEyNDQuNSIgeT0iLTkzLjUiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MSAtMC43MDcxIDAuNzA3MSAwLjcwNzEgMzE1LjQ2NzUgMTEzMC42MDg0KSIgY2xhc3M9InN0NSIgd2lkdGg9IjU1NiIgaGVpZ2h0PSI1NTYiLz48cmVjdCB4PSI4NTEuNSIgeT0iMjk5LjUiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MSAtMC43MDcxIDAuNzA3MSAwLjcwNzEgLTc3LjUzMTMgOTY3LjgyNTQpIiBjbGFzcz0ic3Q0IiB3aWR0aD0iNTU2IiBoZWlnaHQ9IjU1NiIvPjwvZz48L2c+PC9nPjwvZz48L3N2Zz4=);}
.boom:after{   content: "";   display: block;   position: absolute;   background-image:url(https://static.telegraph.co.uk/develop/aem/subscriptions/clubs/politics.png); background-size: contain; background-repeat: no-repeat; background-position: bottom right;   width: 723px;   height: 191px;   bottom: 0;   right: 10%;}
.content {	color: white; margin: 0 30%;	position: relative;	z-index: 2;}


.background-test {    color: white;		position: relative;}
.background-test::before {	background-image: 	url(https://www.injustice.com/storage/characters/cyborg/portrait-outline.png);	background-position: bottom right;	background-repeat: no-repeat;	background-size: auto 320px;    content: "";        display: block;        position: absolute;        top: 0;        left: 0;        right: 0;        bottom: 0;	        z-index: 1;}.background-test::after {    content: "";    display: block;    position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;	    z-index: 0;	background-color: #13293D;		background-image: 	url(https://www.transparenttextures.com/patterns/basketball.png),						url(https://dummyimage.com/340x260/16324F.png&text=+),							url(https://dummyimage.com/260/18435A.png&text=+),																								url(https://dummyimage.com/260/38618C.png&text=+),																		url(https://dummyimage.com/340x260/3E92CC.png&text=+);	background-position: 0 0,						 0 100%,						 100% 100%,						 0 0,						 100% 0;	background-repeat: repeat,					   no-repeat,					   no-repeat,					   no-repeat,					   no-repeat;	background-size: auto,					auto,					auto,					auto,					auto;}/*#18435A#38618C#16324F#13293D#3E92CC*/

dabblet.html

<!-- content to be placed inside <body>…</body> -->
<div class="boom"><div class="content"> <h1>Headline headline</h1><p>some content some content, some content some content, some content some content, some content some content, content, some content some content, some content some content,  content, some content some content, some content some content,  some content some content. </p><ul><li>blah blah</li><li>blah blah</li><li>blah blah</li></ul></div></div>
<p></p>
<div class="background-test"><div class="content"> <h1>Headline headline</h1><p>some content some content, some content some content, some content some content, some content some content, content, some content some content, some content some content,  content, some content some content, some content some content,  some content some content. </p><ul><li>blah blah</li><li>blah blah</li><li>blah blah</li></ul></div></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}