JSFiddle - React, Tailwind, and code Playground

HTML

<div id="grandparent">
    <div class="main-bg-blue">
        <div class="rt-bg2">&nbsp;</div>
    </div>
</div>

CSS

div {width:100px; height:100px}

/* ---------------------------------------------------------------------------------
try commenting and uncommenting these rules below to see what result they produce
------------------------------------------------------------------------------------- */

/* .rt-bg2 { background-image: url("http://dummyimages.com/100x100/000000/ffffff.png&text=lorem"); } */
/* .main-bg-blue .rt-bg2 { background-image: url("http://dummyimages.com/100x100/000000/ffffff.png&text=ipsum"); } */
/* #grandparent div {background-image: url("http://dummyimages.com/100x100/000000/ffffff.png&text=sit"); } */
/* #grandparent .rt-bg2 { background-image: url("http://dummyimages.com/100x100/000000/ffffff.png&text=dolor"); } */
/* #grandparent .main-bg-blue .rt-bg2 {background-image: url("http://dummyimages.com/100x100/000000/ffffff.png&text=amet"); } */

/* --------------------------------------------------------------------------------------
To be absolutely sure that your new rule will overwrite old one in your example, without adding classes or ID in your  existing code, you should find parent element like in my example ID "grandparent" or class "grandparent" and set the rule with that class or ID included.

ID's have greater specificity then classes though.
-----------------------------------------------------------------------------------------*/

#grandparent .main-bg-blue .rt-bg2 { background-image: url("http://dummyimages.com/100x100/000000/ffffff.png&text=ipsum"); }