diff --git a/css/style.css b/css/style.css
index c3e158c..4edfe4e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -7,8 +7,8 @@ textarea {
 	background-color: var(--textarea-bg);
 	color: var(--textarea-color);
 	border: 1px solid gray;
-	width: 302px;
-	height: 152px;
+	width: 258px;
+	height: 194px;
 	resize: none;
 }
 
diff --git a/index.html b/index.html
index b9429dd..9cf513c 100644
--- a/index.html
+++ b/index.html
@@ -46,7 +46,13 @@ show_version: true
 								<div class="col-sm-6">
 									<textarea id="input" onkeyup="updateBitmap()" placeholder="Type here"></textarea>
 									<br>
-									<canvas id="canvas"></canvas>
+									<canvas id="canvas" width="256" height="192"></canvas>
+									<br>
+									Background color:
+									<input class="btn btn-outline-secondary" id="bgColor" type="color" value="#FF00FF" onchange="setBg(this.value)">
+									<br>
+									Background image:
+									<input class="form-control" id="bgImage" placeholder="https://example.test/background.png" onchange="setBg(this.value)">
 								</div>
 								<div class="col-sm-6">
 									<h3>Palette colors:</h3>
diff --git a/js/nftr.js b/js/nftr.js
index adf6110..43db1e0 100644
--- a/js/nftr.js
+++ b/js/nftr.js
@@ -1302,3 +1302,15 @@ function updateExtraKerning(event) {
 	
 	updateBitmap();
 }
+
+function setBg(value) {
+	if(value[0] == "#") {
+		document.getElementById("canvas").style.backgroundColor = value;
+		document.getElementById("canvas").style.backgroundImage = "";
+		document.getElementById("bgColor").style.backgroundColor = value
+	} else {
+		document.getElementById("canvas").style.backgroundColor = "";
+		document.getElementById("canvas").style.backgroundImage = "url(" + value.replace(/[ ()]/g, r => "%" + r.charCodeAt(0).toString(16)) + ")";
+		document.getElementById("bgColor").style.backgroundColor = ""
+	}
+}