Background Image loading very slow

I’m currently using some CSS to present an image in the background. But this image takes forever (5-7 seconds) to load. Is there a way to make this load faster?

CSS Link: Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

Actual CSS code

<div class="background"></div>
<pre><span><style>
.background {
position: fixed;
margin-top:0;
width: 100%;
height:100%;
top:0;
right:0; 
left: 0%;
z-index:-100;
filter: brightness(50%);
background-image: url("https://images.unsplash.com/photo-1575525351624-d5cbc45a82a1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=710&q=80"); 
background-size: cover;
background-position: center center;
}

I think the reason is this.

You can try some ways here and let us know if it works.

3 Likes