CSS overlay image mask over a gradient background flashing on page load - css

Question

I have a problem I'd like to solve without JavaScript-preloading. The 'jumbotron' or banner at the top of the page consists of the background gradient overlaid with an alpha masked image.
When the page below loads, the gradient background is visible for a fraction of a second before the image loads (Chrome 23 on OS/X -- with empty browser cache):
http://criticue-staging.herokuapp.com
The image is pretty small; I've tried using :before to preload the image but it doesn't seem to work.
Here's the CSS for the jumbotron:
.jumbotron {
background: #550074; /* Old browsers */
background-image: url(/images/jumbotronbg.png), -moz-linear-gradient(45deg, #550074 14%, #CC26A7 82%); /* FF3.6+ */
background-image: url(/images/jumbotronbg.png), -webkit-gradient(linear, left bottom, right top, color-stop(14%,#550074), color-stop(82%,#CC26A7)); /* Chrome,Safari4+ */
background-image: url(/images/jumbotronbg.png), -webkit-linear-gradient(45deg, #550074 14%,#CC26A7 82%); /* Chrome10+,Safari5.1+ */
background-image: url(/images/jumbotronbg.png), -o-linear-gradient(45deg, #550074 14%,#CC26A7 82%); /* Opera 11.10+ */
background-image: url(/images/jumbotronbg.png), -ms-linear-gradient(45deg, #550074 14%,#CC26A7 82%); /* IE10+ */
background-image: url(/images/jumbotronbg.png), linear-gradient(45deg, #550074 14%,#CC26A7 82%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#550074', endColorstr='#CC26A7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
Is there anything that can be done, preferably without JavaScript preloading?
Thank you so much in advance.
UPDATE: I also tried embedding the images but it doesn't do the trick:
Here's the full CSS:
.jumbotron {
background-color: #310046;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAUCAYAAABF5ffbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAINJREFUeNpcj8EJACEMBMOSAgQR/Nt/DVeR4Et8HhtYCBFkk6jD6Gutr/duWntvQ2vNzjkxYLLHvdfmnDFksscYw957MWSyBwtyuHUAcTIb4mS2i6OnMcyNuKiO4Vkdub06BlMc/l8XUB2ZToaYvMn06sj06ki2Z0fVqI7BrI6sfwEGADdYfUa4U86zAAAAAElFTkSuQmCC),
-moz-linear-gradient(45deg, #550074 14%, #CC26A7 82%); /* FF3.6+ */
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAUCAYAAABF5ffbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAINJREFUeNpcj8EJACEMBMOSAgQR/Nt/DVeR4Et8HhtYCBFkk6jD6Gutr/duWntvQ2vNzjkxYLLHvdfmnDFksscYw957MWSyBwtyuHUAcTIb4mS2i6OnMcyNuKiO4Vkdub06BlMc/l8XUB2ZToaYvMn06sj06ki2Z0fVqI7BrI6sfwEGADdYfUa4U86zAAAAAElFTkSuQmCC),
-webkit-gradient(linear, left bottom, right top, color-stop(14%,#550074), color-stop(82%,#CC26A7)); /* Chrome,Safari4+ */
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAUCAYAAABF5ffbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAINJREFUeNpcj8EJACEMBMOSAgQR/Nt/DVeR4Et8HhtYCBFkk6jD6Gutr/duWntvQ2vNzjkxYLLHvdfmnDFksscYw957MWSyBwtyuHUAcTIb4mS2i6OnMcyNuKiO4Vkdub06BlMc/l8XUB2ZToaYvMn06sj06ki2Z0fVqI7BrI6sfwEGADdYfUa4U86zAAAAAElFTkSuQmCC),
-webkit-linear-gradient(45deg, #550074 14%,#CC26A7 82%); /* Chrome10+,Safari5.1+ */
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAUCAYAAABF5ffbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAINJREFUeNpcj8EJACEMBMOSAgQR/Nt/DVeR4Et8HhtYCBFkk6jD6Gutr/duWntvQ2vNzjkxYLLHvdfmnDFksscYw957MWSyBwtyuHUAcTIb4mS2i6OnMcyNuKiO4Vkdub06BlMc/l8XUB2ZToaYvMn06sj06ki2Z0fVqI7BrI6sfwEGADdYfUa4U86zAAAAAElFTkSuQmCC),
-o-linear-gradient(45deg, #550074 14%,#CC26A7 82%); /* Opera 11.10+ */
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAUCAYAAABF5ffbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAINJREFUeNpcj8EJACEMBMOSAgQR/Nt/DVeR4Et8HhtYCBFkk6jD6Gutr/duWntvQ2vNzjkxYLLHvdfmnDFksscYw957MWSyBwtyuHUAcTIb4mS2i6OnMcyNuKiO4Vkdub06BlMc/l8XUB2ZToaYvMn06sj06ki2Z0fVqI7BrI6sfwEGADdYfUa4U86zAAAAAElFTkSuQmCC),
-ms-linear-gradient(45deg, #550074 14%,#CC26A7 82%); /* IE10+ */
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAUCAYAAABF5ffbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAINJREFUeNpcj8EJACEMBMOSAgQR/Nt/DVeR4Et8HhtYCBFkk6jD6Gutr/duWntvQ2vNzjkxYLLHvdfmnDFksscYw957MWSyBwtyuHUAcTIb4mS2i6OnMcyNuKiO4Vkdub06BlMc/l8XUB2ZToaYvMn06sj06ki2Z0fVqI7BrI6sfwEGADdYfUa4U86zAAAAAElFTkSuQmCC),
linear-gradient(45deg, #550074 14%,#CC26A7 82%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#550074', endColorstr='#CC26A7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
text-align: center;
position: relative;
margin: 0;
padding: 30px 0 40px 0;
height: 300px;
-webkit-box-shadow: inset 0px -3px 3px #211;
-moz-box-shadow: inset 0px -3px 3px #211;
box-shadow: inset 0px -3px 3px #211;
margin-bottom: 30px;
}

Answer 1

You can set a navbar-inner to a height of 48px. The height of the image won't change, and you set the padding-top and padding-bottom as 10px. Will prevent resizing.