Fading a background image on page load with javascript

merv112
merv112 used Ask the Experts™
on
Hey folks,

Is there a way to fade in the background image of an html page without fading the other elements?

Basically right now I'm using jQuery's FadeIn() and a div overlay (see example htm) which does the job, but it also fades in the other elements in addition to the background image. I'd prefer the content load first, with only the background image actually fading in. What's the best way to go about this?

Thanks!

<html>
<head>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $("#b").fadeIn();
        
    });
</script>

</head>
<body>
<div id="b" style="display:none;left:0;top:0;margin:0;padding:0;width:100% 
     !important; height:100% !important;
      background-image:url('background_products.jpg');z-index:-1000;">
<div>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>

</div>

</body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
what about two divs? One over the background div?
Project Lead
Commented:
try this... it works as reqd... however you mite have to adjust width and height ...
<html>
<head>
    <script type="text/javascript" src="jquery.min.js"></script>

    <script type="text/javascript">
      $(document).ready(function(){
        $("#b").fadeIn();
      });
</script>

</head>
<body>
<div id="b" style="display:none;left:0;top:0;margin:0;padding:0;width:1600px;height:800px;
      background-image:url('background_products.jpg');z-index:-1000;float:left">
</div>
<div style="left:0px;top:-800px;margin:0;padding:0;position:relative">
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>

</div>
</body>
</html>
Kiran SonawaneProject Lead
Top Expert 2011
Commented:
Check this below code
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" language="JavaScript" type="text/javascript"></script> 
    <script type="text/javascript">
   $(document).ready(function(){
      $('#b').fadeIn();
   });
   
</script>
</head>
<body>
<div id="b" style="display:none;left:0;top:0;margin:0;padding:0;width:1600px;height:800px; 
      background-image:url('ipaddesign.png');z-index:-1000;float:left">
</div>
<div style="padding:0;margin:0;padding:0;width:1600px;height:800px;position:absolute;">
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</body>
</html>

Open in new window

Author

Commented:
Thanks!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial