JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div id="banner" class="banner">
    
</div>

<div class="article">
    <img src="http://placekitten.com/50/50" alt="">
    <img src="http://placekitten.com/80/80" alt="">    
</div>
<p><img src="http://placehold.it/50x50/585858/FFFFFF.png&text=Illustration" alt=""></p>

CSS

.banner {padding-top: 10%; display: block; text-indent: -9999em; background-image: url(http://placehold.it/960x640/000000/FFFFFF.png&text=Illustration); background-size: cover; background-position: center center; display: block; -webkit-border-radius:0 0 5px 5px; border-radius:0 0 5px 5px;}

JavaScript

var images = document.querySelector('.article').getElementsByTagName('img');
if (images.length > 0) {
	var img = document.querySelector('img').getAttribute('src');
    document.getElementById('banner').setAttribute('style', 'background-image:url(' + img +')');
   document.querySelector('img').setAttribute('style','display:none');
}