Home/ Questions/Q 7044669
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T02:26:14+00:00

I gave the body a class .wrapbgone and I am switching the class after

  • 0

I gave the body a class .wrapbgone and I am switching the class after X seconds to .wrapbgtwo.

I want the switching to appear with fade effect.

This is my CSS:

.wrapbgone{background:url('http://placehold.it/500x500/915');height:100%;}
.wrapbgtwo{background:url('http://placehold.it/500x500/400');height:1580px;}

and here is the example: http://jsbin.com/ebemez/4/edit

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Because you’re swapping a class, you can’t fade it to the best of my knowledge (you can cycle background colours – see the header of http://www.made-by-mike.co.uk), but not images.

    The best solution I can think of is to nest two absolutely-positioned divs in the root level of your document (before your content div):

    <body>
    <div id="bgone">&nbsp;</div>
    <div id="bgtwo">&nbsp;</div>
    <div id="content">
        ...
    </div>
</body>

    Then use jQuery to fade one in over the other:

    $(document).ready(function() {
    $('#bgtwo').fadeTo(0,0); // or set opacity to 0 in CSS to prevent div appearing then disappearing on page load
    $('#bgtwo').fadeTo(500, 1, function(){
        $('#bgone').remove(); // replace remove() with fadeTo(500,0) if you don't want to remove it from the page altogether
    })
});
    • 0