jquery - Background image not fading in -
i've been trying figure out why background image not fading in. i've tried using css/jquery , w3 route. can see background image showing , have checked see jquery code working tags nest inside body tag. have read other posts not helping.
$(document).ready(function(){ $("body").hide().fadein(3000); });
body { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url('../images/index.jpeg'); }
<!doctype html> <html> <head> <title>title</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=lato"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/styles.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="scripts/myscript.js"></script> </head> <body> </body> </html>
$(document).ready(function() { $("body").hide().fadein(3000); });
html,body{ margin:0; padding:0; } div{ width:100%; height: 100vh; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url('http://www.nationalgeographic.com/content/dam/science/photos/000/009/940.jpg'); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> </div>
Comments
Post a Comment