How to give delay to background image of body

HTML & CSS
1

hello,

i am designing a page in which i want show the background image after some time…

i mean, first i am loading some content, then they are hide after few seconds and then i want show my background image…

the bg.jpg should visible after few seconds

plz tell me how to do that?

body {

font-family: 'BebasNeueRegular';
width:100%;
height:100%;
overflow-x: hidden;
background:#FFF;
background:url(../images/bg.jpg) 0 -120px;

}

2

This won’t work IE9 and less, but here you go.

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    body {
    font-family: 'BebasNeueRegular';
    width:100%;
    height:100%;
    overflow-x: hidden;
        -webkit-animation: imgFade 10s;
        animation: imgFade 10s;
    }
    
    @-webkit-keyframes imgFade
{
        from {background: #FFF;}
        to {background: url(imagehere.jpg) 0 -120px;}
    }
   
    @keyframes imgFade
{
        from {background: #FFF;}
        to {background: url(imagehere.jpg) 0 -120px;}
    }
    </style>
    </head>
    <body>
    <h1>FYI this won't work in IE9 or lower</h1>
    </body>
    </html>

Edit-Indentation completely messed up but whatever :slight_smile: .

2 Likes
3

ouuuu…it works…

THANKU SO MUCH RyanReese

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.