Banner Dynamic BG Image

Turn image into background image

by Michael Mandarino

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="banner-wrp">
    <div class="banner-text">
        Hello World
    </div>
    <div class="banner-img">
        <img src="http://www.gstatic.com/webp/gallery/4.jpg" />
    </div>
</div>

SCSS

.banner-wrp {
    background: no-repeat #61bb46 center;
    background-size: cover;
    margin: 0 auto;
    min-height: 300px;
    padding: 4rem;
    text-align: center;
	
    .banner-text {
        color: #000;
        font-size: 2rem;
        font-weight: bold;
    }
    .banner-img {
        background-color: #00afba;
        margin: 1em 0;
        padding: 1em;
    }
}

JavaScript

$(document).ready(function() {
    $('.banner-wrp').each(function() {
        $(this).find('.banner-img').hide();
        if ($(this).find('.banner-img img').length > 0) {
            var banner_image_src = $(this).find('.banner-img img').attr('src');
            $(this).css({
                'background-image': 'url("' + banner_image_src + '")'
            });
        }
    });
});