0

I hosted my static site, generated by 11ty on Heroku. Everything is ok, but one thing - background image isnt loaded properly, as I said in the title, it twitches. The image is downloaded, I dont use links. The image is of size 895,4 kB. Can someone help me to work it out? Here is my code:

<!DOCTYPE html>
<html>

<head>
    {% block title %}
        <title>HTML && CSS tutorial</title>
    {% endblock %}
        <link rel="stylesheet" href="{{ base_styles_path }}">
    {% block head %}
    {% endblock %}
</head>

<body>
    <div class="parent">
        <img class="bg" src="{{ background_path }}">
        <div class="container">
            <div class="top-nav">
                <a href="/">HOME</a>
                <a href="/lists/html">HTML</a>
                <a href="/lists/css">CSS</a>
                <a href="/next">NEXT STEPS</a>
            </div>
        </div>
    </div>
    <div class="content">
        {% block content %}
        {% endblock %}
    </div>
</body>
</html>

And {{ base_styles_path }} styles :

/* Background image styles */
.bg {
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  filter: blur(6px);
  -webkit-filter: blur(6px);
  top: 0;
  left: 0;
  transform: scale(1.015);
  z-index: -1;
}

UPD: Image compression didn't help

S.S. Anne
  • 15,171
  • 8
  • 38
  • 76
Denys Ivanenko
  • 388
  • 7
  • 21
  • 1
    Since you're heavily blurring your image, you don't need it to be so large. You might lower its quality, DPI, dimensions. – Kosh Apr 16 '20 at 16:24

1 Answers1

0

This may be an issue with how you are hosting your files - Heroku can sometimes not cache the images, or take a second to load from cold.

Most likely though is the image size - 0.8MB is quite large, and could take a second to load on slower connections. As you are blurring the image a lot anyway, you could compress that image right down to a tiny size with no perceptible visual differences.

Luke Storry
  • 6,032
  • 1
  • 9
  • 22