CSS-defined background image doesn't display in Chrome - css

Question

I know there's a ton of similar questions about this on here, but none seem to address the issue for me.
css code:
/*Deferred Payment Popup*/
div.DeferredPaymentPopup {
}
div.DeferredPaymentPopup input.RefreshImage {
background-image: url(../Images/Refresh-icon.png);
background-position: left top;
display: inline-block;
float: left;
width: 15px;
height: 18px;
}
Code on page -
<div id="DeferredPaymentPopup" class="DeferredPaymentPopup newportal popup" title="Deferred Payment Calculator">
<div data-bind="with: statement.viewModel.DeferredPaymentModel">
...
<div id="divDollarCalc">
<div style="float: left; padding-left: 4px">
<input type="image" onclick="return false;" title="Refresh" class="RefreshImage" />
</div>
</div>
There's a number of nested divs on the page, and a couple of them have their own IDs - I included one of them for illustration.
No issues in IE or Edge.
All looks well on inspect in Chrome:
Thoughts?

Answer 1

You can use src attribute of input[type=image]
<input type="image" src="../Images/Refresh-icon.png" />
Clarification for the questions from comments:
For input[type=image] and img tags in chrome, if there is no src attribute or invalid src attribute, browser shows the icon of broken image which is not background, that's why you cant override it from css background.
However img tag is not showing the icon when there is no src attribute at all, it is showing only when the value of src is invalid.
But for input[type=image] it is showing up even when there is no src attribute, this behavior is different for img and input[type=image].
I don't know the exact reason behind that, but my guess is that may be src is optional for img but not for input[type=image].
As per the problem input[type=submit] not working, if you can provide the new code you have tried we should be able to help you with that.
This is a small experiment that shows how it works
<p><strong>input type="image"</strong></p>
<p>Without src</p>
<input type="image" style="display:inline-block;width: 40px;height: 40px;background: #000;"/>
<p>With src</p>
<input type="image" style="display:inline-block;width: 40px;height: 40px;background: #000;" src="https://static-cdn.jtvnw.net/jtv_user_pictures/e91a3dcf-c15a-441a-b369-996922364cdc-profile_image-300x300.png"/>
<br />
<br />
<p><strong>input type="submit"</strong></p>
<p>With background</p>
<input type="submit" style="display:inline-block;width: 40px;height: 40px;background: #000;"/>
<br />
<br />
<p><strong>img</strong></p>
<p>Without src</p>
<img style="display:inline-block;width: 40px;height: 40px;background: #000;"/>
<p>With empty src</p>
<img style="display:inline-block;width: 40px;height: 40px;background: #000;" src />
<p>With invalid src</p>
<img style="display:inline-block;width: 40px;height: 40px;background: #000;" src="//avcs" />
<p>With valid src</p>
<img style="display:inline-block;width: 40px;height: 40px;background: #000;" src="https://static-cdn.jtvnw.net/jtv_user_pictures/e91a3dcf-c15a-441a-b369-996922364cdc-profile_image-300x300.png" />

Answer 2

Use .DeferredPaymentPopup, input.RefreshImage{...} because RefreshImage is not a child of the DeferredPaymentPopup div
Edit
Is this what you intend to achieve? Instead of input type="image" , I used text
div.DeferredPaymentPopup {}
div.DeferredPaymentPopup input.RefreshImage {
background: url("http://res.cloudinary.com/sayob/image/upload/v1526907328/483257_vwhhfw.jpg") no-repeat left top;
display: inline-block;
float: left;
width: 100px;
height: 18px;
}
<div id="DeferredPaymentPopup" class="DeferredPaymentPopup newportal popup" title="Deferred Payment Calculator">
<div data-bind="with: statement.viewModel.DeferredPaymentModel">
<div id="divDollarCalc">
<div style="float: left; padding-left: 4px">
<input type="text" onclick="return false;" title="Refresh" class="RefreshImage" />
</div>
</div>
</div>
</div>
Use .DeferredPaymentPopup, input.RefreshImage{...} because RefreshImage is not a child of the DeferredPaymentPopup div