JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<div class="hede"></div>

CSS

.hede{
    background: 
    url("http://www.gravatar.com/avatar/89aa7346dc0e9f884029024483f2cb32?s=32&d=identicon&r=PG"), 
    url("http://www.gravatar.com/avatar/2a0474d17360dbdf024447db0eb989dd?s=64&d=identicon&r=PG"), 
    url(http://lorempixel.com/100/200/nature/2);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: center top, center 100%, center bottom;
    background-attachment: scroll, scroll, scroll;
    background-size: 100% auto, 100% auto, 100% auto!important;
    height: 750px;
    width: 20%;
}

JavaScript

$(function() {
    $(window).on("resize", function() {
        $(".hede").css("backgroundPosition", "center top, center center, center " + $(".hede").width() + "px");
    }).trigger("resize");
});