Home/ Questions/Q 6110997
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T14:34:48+00:00

I want to fade in a CSS page background image with jQuery when my

  • 0

I want to fade in a CSS page background image with jQuery when my page loads. I know it is possible to set a CSS page background image with jQuery and it is also possible to fade in text when a page loads but I am not sure how to do both.

You can set a CSS background image in jQuery by doing:

showBackground($("body").css({"background-image":"url(yourimage.jpg)"}));

You can fade in text by doing:

$(document).ready(function(){
            $('#fade').hide();
            $('#fade').append('This text should fade in.');
            $('#fade').fadeIn();
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can load the body background image on page load but to fade it you need to use some other manipulation like putting a div with 100% height-width to hold background image. I have tried following and it fades in both text and background (in div).

    <html>
<head>
    <script type="text/javascript" 
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
    </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('DSC00667.jpg');z-index:-1000;">
</div>
<div style="top:0;left:0;position:absolute;">
    <div id="d" style="height:200px;width:500px;margin:0 auto;top:0;
        clear:none;z-index:100;">
        this is text div that will fade in.
    </div>
    <div style="clear:both;height:1px !important;">&nbsp;</div>
</div>
<script type="text/javascript">
    $(function(){
        $("#b").fadeIn();
        $('#d').hide().append('This text should fade in.').fadeIn();
    });
</script>
</body>
</html>

    fewer style elements may also work but I have not tested.

    • 0