CODEWITHSUNDEEP
javascriptjqueryhtmlcss
pianoman
pianoman

Reputation: 815

jQuery fadeIn with Background Image

I'm using jQuery to fadeIn my homepage, but it's currently fading in from white. Is there a way to fade in from a black page? This is the same kind of thing when loading an iframe and it flashes white. I know that can be fixed, so I assume there's probably a fix for this too.

CSS:

html {
    background: black url(images/bg.jpg) no-repeat 200px center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    display: none;
}
body {
    margin: 0;
    height: 100%;
    padding-left: 40px;
    padding-top: 25px;
}

Script:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="home.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('html').fadeIn(3000);
    })
</script>
</head>
<body>
</body>
</html>

Upvotes: 1

Views: 667

Answers (1)

Ejaz
Ejaz

Reputation: 8872

Yes, try changing <body> to 

<body><div id="page">Content here</div></body>

CSS to

html,body{background:#000; height: 100%}
#page{
    background: black url(images/bg.jpg) no-repeat 200px center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    display: none;
}

and Javascript to

$(document).ready(function(){
    $('#page').fadeIn(3000);
})

Havn't tested but could work for you :)

Upvotes: 3

Related Questions