javascript - bgStretcher not working in FireFox or Chrome -


okay i'm wrapping website , i'm having issue firefox , chrome. issue same both browsers i'm guessing it's easy fix , i'm being dumb.

so i'm using bgstretcher ajaxblender.com. works wonderfully on ie9 when load site on firefox , chrome, bgstretcher either not loading or not loading correctly. background not function background , divs pushed bottom , moved out of whack. html code follows:

<script type="text/javascript"> $(document).ready(function(){      //  initialize backgound stretcher          $('body').bgstretcher({         images: ['images/gervais_street.jpg'],         imagewidth: 1024,          imageheight: 720,      });  }); 

when comment section out, divs function correctly there no background. can see wrong?

here code page:

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>gg web design</title>  <link rel="stylesheet" type="text/css" href="css/bgstretcher.css" /> <link rel="stylesheet" type="text/css" href="css/gg.css" /> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="js/bgstretcher.js"></script>  </head>  <body>  <!-- ajaxblender.com --> <script type="text/javascript">     $(document).ready(function(){          //  initialize backgound stretcher              $('body').bgstretcher({             images: ['images/gervais_street.jpg'],             imagewidth: 1024,              imageheight: 720,          });      }); </script> <!-- end ajaxblender.com script -->  <script src="js/create_menu.js"></script> <script>     create_menu(); </script>  <div id="content">     <center>         welcome g<span class="mirror">g</span> web design.     </center> </div>  <div id="picture_credit">     gervais street bridge - photo steve moore&nbsp;&nbsp; </div>  <script src="js/create_footer.js"></script> <script>     create_footer(); </script>  </body> </html> 

i know i'm doing stupid gentle. everyone!

first thing try swapping order you're loading css. put bgstretcher.css call last instead of first.

another thing consider using background-size:cover modern browsers. put bgstretcher calls(both js , css) in ie conditional statement handle background ie.

here's good link on topic...


Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -