JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wd1">WD1</div>
<div id="wd2">
    <div id="d2"></div>
</div>
<div id="wd3">WD3</div>
<div id="wd4">
    <div id="d4"></div>
</div>
<div id="wd5">WD5</div>

CSS

#wd1{width:100%;height:350px;background:maroon;}
#wd2{width:100%;height:200px;background:url(http://placekitten.com/98/48) 100% 300% no-repeat;}
    #d2 {width:100%;height:200px;}
#wd3{width:100%;height:350px;background:green;}
#wd4{width:100%;height:200px;background:url(http://placekitten.com/798/501) no-repeat fixed;}
    #d4 {width:100%;height:200px;}
#wd5{width:100%;height:350px;background:darkcyan;}

/* *********************************************************************************** */
#d4:after{position:absolute;top:15%;left:10%;width:80%;height:80%;font-size:1.8em;content:"WD4 - This works perfectly, and is the desired effect for WD2 also - but using responsive sizing units";color:palegoldenrod;text-shadow:1px 1px 2px black;}
#d2:after{position:absolute;top:15%;left:10%;width:80%;height:80%;font-size:1.8em;content:"WD2 - Should display a kitten pic, with same visual effect as WD4, below, but using percentages or vw units or some other responsive unit";color:goldenrod;text-shadow:1px 1px 2px lightgrey;}

div{position:relative;border:1px solid grey;}
#wd1,#wd3,#wd5{top:30%;text-align:center;font-size:3em;color:grey;}

JavaScript

/*

StackOverflow question:
http://stackoverflow.com/questions/30059702/css-enlarge-background-image-beyond-div-size

----------------

The desired effect here is to make both WD2 and WD4 have the same visual effect. WD4 works, and is the example; WD2 does not work and is the test div.

The GOAL is to make the effect responsive, which it is not. WD4 uses an image based on pixel size, so it will not scale. I am hoping to find a way to use percentages to set the pixel size in relation to the DIV. ***** It is NOT necessary to use the pics from placekitten.com.*****

I found these SO questions which may contain some helpful information:

http://stackoverflow.com/questions/4056410/can-background-image-extend-beyond-divs-borders

http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only

https://css-tricks.com/almanac/properties/b/background-attachment/
https://css-tricks.com/almanac/properties/b/background-size/
https://css-tricks.com/the-lengths-of-css/
https://css-tricks.com/almanac/properties/b/background/
*/