Loading big image on web page as background

help you fix your problem We need to show a loading image until the page large size of background image is loaded. This bg image will be called to body tag in the HTML file not through CSS. , Try this

$(document).ready(function(){
    //Display image here
}


$(window).load(function(){  
    //remove image
});  

around this issue Jquery mobile navigation uses Ajax to load the body part only of the pages you navigate to. This means that the header of subsequent pages is ignored, and that the header of your first page is "applied" to all pages. If you want your background to apply only to your first page, I would recommend:
you create a data-role="page" div to hold the content of your first page, as recommended when using jquery mobile You apply your background to this specific page element

I wish did fix the issue. I think what putvande meant was that the images are too large in terms of byte size (like over 4000 pixels wide or something) and/or the resolution might be over 72 dpi. You should Google how to optimize images and learn about bytes.
If you're on a mobile use media queries with a smaller image. For example:

.homeBg
{
    background:url(../images/home-bg.jpg) no-repeat scroll center top;
}

 @media screen and (max-width: 1000px) {
 .homeBg
   {background:url(../images/home-bg-1000px.jpg) no-repeat scroll center top;}
 }


 @media screen and (max-width: 480px) {
 .homeBg
    {background:url(../images/home-bg-for-mobile-size.jpg) no-repeat scroll center top; }
 }

I hope this helps you . Change your css to this, because your css is invalid (when you define background-image you can't include the no-repeat. either use background: url() no-repeat; or add background-repeat: no-repeat;):

 #intro {
   position: relative;
   padding-bottom: 102px;   
   min-height: 900px;
   width: 100%;
   background: #161415 url(http://example.com/images/38697eae8ca030cd1f8cd11d752249ef.jpg) no-repeat center center;
   background-size: cover;