Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div id="banner"></div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#banner { background: url('https://dummyimage.com/300x200/f2f2f2/999999.jpg'); width: 300px; height: 200px; }
CSS
Autoformát
CSS reset
Až na konci
function loadBackground(url, query) { return new Promise(function (resolve, reject) { var iframe = document.createElement("iframe"); iframe.onload = function () { var el = iframe.contentDocument.querySelector(query); if (el) { var style = iframe.contentWindow.getComputedStyle(el); resolve(style.getPropertyValue("background-image")); } else { reject(new Error("Element not found")); } document.body.removeChild(iframe); }; iframe.style.width = 0; iframe.style.height = 0; iframe.style.border = 0; iframe.src = url; document.body.appendChild(iframe); }); } loadBackground("http://kod.djpw.cz/baxc-", "#banner").then(function(tamBG) { var tadyBG = jQuery('#banner'); tadyBG.css({'background-image': tamBG, "transition": "all 1.5s" }); });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>