Hi, I noticed that the background image on this web page is the last to load. It's in the #content{margin-left:auto;margin-right:auto;width:750px;height:100%;border:solid 1px #000;background-image:url(background_msg.gif);background-repeat:no-repeat} Below is the whole script. How would I get this background image to preload, or load faster? thanks <html> <head><title>Main Street </title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <style> body{margin:0px;text-align:center;background:black} #content{margin-left:auto;margin-right:auto;width:750px;height:100%;border:solid 1px #000;background-image:url(background_msg.gif);background-repeat:no-repeat} .par1{margin-left:10px;width:300px;height:350px;float:left;font-family:rockwell;font-size:13px;color:#800000;font-weight:bold} .par3{margin-left:10px;width:400px;height:100px;padding;0px;font-family:rockwell;font-size:16px;color:#000000;float:left} .par4{margin-left:10px;width:400px;height:200px;padding;0px;font-family:rockwell;font-size:16px;color:#800000;font-weight:bold;float:left} .par5{margin:0px;width:750px;height:65px;padding;0px;font-family:rockwell;font-size:13px;font-family:rockwell;font-size:15px;color:#000000;font-weight:thin;text-align:center;float:left} .par6{margin:0px;width:750px;height:65px;padding;0px;font-family:rockwell;font-size:12px;font-family:rockwell;font-size:16px;color:#800000;font-weight:bold;text-align:center;float:left} .par7{margin:0px;width:300px;height:50px;font-family:rockwell;font-size:11px;font-family:rockwell;font-size:16px;color:#000000;font-weight:bold;float:left} .par8{margin:0px;width:300px;height:50px;font-family:rockwell;font-size:11px;font-family:rockwell;font-size:16px;color:#000000;font-weight:bold;float:right} .footer{margin:0px;width:750px;height:20px;text-align:center;font-family:rockwell;font-size:10px;font-family:rockwell;font-size:12px;color:#000000;float:right;float:left} a:visited{color:black} a:hover{color:#800000} a:active:{color:black} </style> </head> <body> <div id="content"><p class="par1"><br><img src="logo.gif"></p><p class="par3"><br><br><i>We invite friends old and new to gather and refresh their senses in the historic Smith Grain Store </i></p> <p class="par4"><br> <img src="maroon_block.gif"> pub dining and tavern spirits served in a rustic and relaxed atmosphere<br><br> <img src="maroon_block.gif"> overstuffed sandwiches and burgers<br><br> <img src="maroon_block.gif"> steaks, chops and seafood<br><br> <img src="maroon_block.gif"> exquisite desserts<br><br> <a href="msgmenu1.html">MENU</a> </p> <p class="par5"><br><i>Serving Dinner <img src="maroon_block.gif"> Tuesday-Saturday 5:00pm-10:00pm<br>Tavern Spirits <img src="maroon_block.gif"> 5:00pm-Close</i></p> <p class="par6">857 Main Street <br> 518-877-8202</p> <p class="par7"><i>Handicapped Accessible</i></p> <p class="par8"><i>Most Major Credit Cards Accepted</i></p> <p class="footer"><i>Menu items and prices are subject to change without notice.</i></p></div> </body></html>
The background image can be taking to long to load because the image size could be to big which is causing a longer loading time. To fix this try compressing the image.