Load css background before css file - html

Question

EDIT: I ended up using the second solution here and It works wonderfully. Thanks everyone who helped me solve this issue
I have an image declared in a css file like background:url(). The css file is the 2nd thing on the page to load, but the image is the last thing. This image is the first thing people will see on the site, but it loads last. Is there any way to load this image as soon as the page starts loading?
Edit:
$(document).ready(function() {
resizeDiv();
});
window.onresize = function(event) {
resizeDiv();
}
function resizeDiv() {
vpw = $(window).width();
vph = ($(window).height());
$('#mainPic').css({
'height': vph + 'px'
});
$('#mainPicContent').css({
'height': vph + 'px'
});
}
body,
html {
width: 100%;
height: 100%;
margin: 0;
}
h1 {
color: white;
}
#mainPic {
width: 100%;
top: 0;
left: 0;
right: 0;
-webkit-box-shadow: inset 0px 0px 28px 0px rgba(0, 0, 0, 0.53);
-moz-box-shadow: inset 0px 0px 28px 0px rgba(0, 0, 0, 0.53);
box-shadow: inset 0px 0px 28px 0px rgba(0, 0, 0, 0.53);
background: url(//upload.wikimedia.org/wikipedia/commons/0/0e/Tree_example_VIS.jpg) no-repeat center center;
background-size: cover;
background-color: #4a565d;
}
#mainPic::before {
position: relative;
top: 0;
left: 0;
right: 0;
display: block;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
content: "";
}
.centerText {
position: relative;
top: 40%;
transform: translateY(-50%);
text-align: center;
width: 100%;
margin-right: auto;
margin-left: auto;
left: 0;
right: 0;
}
.centerBtn {
height: 50px;
width: 200px;
background-color: transparent;
color: #fff;
display: block;
border-radius: 25px;
border: 1px solid white;
transition: ease-in-out 0.15s;
font-family: arial;
}
.centerBtn:hover {
background-color: white;
color: rgb(14, 143, 185) !important;
cursor: pointer;
border-radius: 25px;
border: 1px solid rgb(134, 134, 134);
transition: ease-in-out 0.15s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainPic" style="">
<div id="mainPicContent" style="position:absolute;top:75px;left:0;right:0;cursor:default;">
<div class="centerText">
<div style="width:850px;margin-right:auto;margin-left:auto;">
<h1 style="margin:0;margin-bottom:20px;">Header</h1>
<div style="width: 725px;height: 5px;margin-right: auto;margin-left: auto;">
<a class="centerBtn" style="float:left;margin-left:145px;" href="#">
<p>Button</p>
</a>
<a class="centerBtn" style="float:right;margin-right:145px;" href="#">
<p>Button</p>
</a>
</div>
</div>
</div>
</div>
</div>
As far as I can tell thats everything relavant to the picture - let me know if you need anything else
Edit 2: Jsfiddle