JSFiddle - React, Tailwind, and code Playground
HTML
<div id="image-form">
<label for="url">Image URL</label>
<input type="text" id="url" />
<input type="button" value="Update" onclick="updateURL()" />
</div>
CSS
html, body {
width: 100%;
height: 100%;
}
body {
background-size: cover;
-ms-filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", sizingMethod="scale")';
}
#image-form {
display: inline-block;
background: #fff;
padding: 10px;
}
JavaScript
window.onload = function() {
setBackground();
}
function updateURL() {
var newURL = document.getElementById('url').value;
setCookie('URL', newURL, 365);
document.body.style.background = 'url('+newURL+') no-repeat';
document.body.style.backgroundSize = 'cover';
document.body.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = newURL;
document.body.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = 'scale';
}
function setBackground() {
var URL = getCookie('URL');
document.body.style.background = 'url('+URL+') no-repeat';
document.body.style.backgroundSize = 'cover';
document.body.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = URL;
document.body.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = 'scale';
}
function setCookie(c_name, value, exdays) {
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name) {
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
c_start = c_value.indexOf(c_name + "=");
if (c_start == -1) {
c_value = null;
} else {
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1)
c_end = c_value.length;
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}