Fade in Background Image
How do I make an fade in background image?
Using CSS animations we mimick a full page background image being faded in. Since we're just fading in the image, we can't put it on the body. Instead, we're creating a div and then manipulating that.. What is a fade in background image? How do you make a fade in background image? This script and codes were developed by Gray Gilmore on 29 October 2022, Saturday.
Fade in Background Image - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fade in Background Image</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="background-image">
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Fade in Background Image - Script Codes CSS Codes
@-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; }
}
.background-image { background: url("http://graygilmore.com/images/bk-body.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; -webkit-animation-name: fade-in; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-in; -webkit-animation-iteration-count: 1; -webkit-animation-delay: 2s;
}
.background-image.visible { opacity: 1;
}
Fade in Background Image - Script Codes JS Codes
$(document).ready(function() { $('.background-image').on('webkitAnimationEnd', function(e) { $(this).addClass('visible'); });
});
![Fade in Background Image - Script Codes](http://shots.codepen.io/graygilmore/pen/hxpEt-512.jpg)
Developer | Gray Gilmore |
Username | graygilmore |
Uploaded | October 29, 2022 |
Rating | 4 |
Size | 2,459 Kb |
Views | 16,192 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Feedback-color Demo | 3,964 Kb |
Webkit Backface Visibility Border Bug | 2,182 Kb |
Search functionality | 2,081 Kb |
Vertical Alignment with Line Height | 2,065 Kb |
Event Watching | 2,847 Kb |
Forms | 7,573 Kb |
Form Submission from Anywhere | 3,563 Kb |
Responsive Font Sizing with Min and Max | 3,537 Kb |
A Pen by Gray Gilmore | 1,798 Kb |
Fizz-Buzz Test, Sass Style | 2,551 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Rainbow Drops | Csbarnes | 2,365 Kb |
Loading animation with css | Icebob | 2,947 Kb |
About Us | Francescaedits | 1,902 Kb |
Process Accordion | Devilskitchen | 31,432 Kb |
Nav Test -- cats 1 | Payls | 4,735 Kb |
A Pen by Theun | Tjoen | 6,152 Kb |
Hoi hoi | JohnTheCat | 7,248 Kb |
Halo 5 REQ Guide Bookmarklet | Cwacht | 3,993 Kb |
Typefaces with descriptions | Megandoty | 2,944 Kb |
Fixed with using Calc | Tomleo | 2,542 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!