JSFiddle - React, Tailwind, and code Playground

by Jimmy Mabey

HTML

Page loaded
<div id="div">
	Background loaded
</div>

CSS

#div {
	color: white;
	background-size: contain;
	opacity: 0;
	transition: opacity 2s;
	height: 500px;

	background-image: url("http://wallpaperswide.com/download/windows_10_hero_4k-wallpaper-2880x1800.jpg");
}
#div:before {
	content: "Desktop";
}

@media (max-width: 600px) {
	#div {
		background-image: url("http://wallpaper-gallery.net/images/windows-red-wallpaper/windows-red-wallpaper-8.jpg");
	}
	#div:before {
		content: "Mobile";
	}
}

JavaScript

var div = document.getElementById("div");
var url = window.getComputedStyle(div).backgroundImage.replace(/^url\("|"\)$/g, "");

var img = new Image();
img.src = url;
img.onload = function() {
	div.style.opacity = 1;
};