Fade in Background Image

Developer
Gray Gilmore
Size
2,459 Kb
Views
16,192
  1. Fade in Background Image Previews
  2. Fade in Background Image HTML Codes
  3. Fade in Background Image CSS Codes
  4. Fade in Background Image JS Codes

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 Previews
IQ Test

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
Fade in Background Image - Script Codes
Home Page Home
Developer Gray Gilmore
Username graygilmore
Uploaded October 29, 2022
Rating 4
Size 2,459 Kb
Views 16,192
Do you need developer help for Fade in Background Image?

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!

Gray Gilmore (graygilmore) Script Codes
Name
Fizz-Buzz Test, Sass Style
Responsive Font Sizing with Min and Max
Form Submission from Anywhere
Full Page Backgrounds, iOS Fail
Forms
Event Watching
Search functionality
Vertical Alignment with Line Height
Vertical Alignment with Inline Block
A Pen by Gray Gilmore
Create amazing captions with AI!

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!