I am trying to load a simple webpage that has an image that covers the entire page background. However, when the page is first loaded, there is a noticeable white flickering for a split second as the image is being loaded. I have already tried suggestions such as but to no effect. Here is my code below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
Does anybody have a solution to remove the flickering effect?
You can set .bg with opacity 0, then with jQuery once the page is done loading add a class set with opacity 1.
If you want a "fadein" effect simply add a transition.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition: opacity 1.3s ease-out;
opacity: 0;
}
.bg.visible{
opacity: 1;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(window).on("load",function(){
$('.bg').addClass('visible');
});
});
</script>
</html>
Maybe not the best solution but it works for me.
If you want an image that covers the entire page background, you should directly set it for the <body> element like this:
body {
background-image: url(your_url/your_image.png);
background-position: center; // to center the image
background-repeat: no-repeat; // to not repeat the image
background-size: cover; // to cover the element
background-color: #000; // fallback if the image is not available
}
or with the CSS shorthand more compact:
background: #000 url(your_url/your_image.png) no-repeat center;
background-size: cover;