I tried to compress the image, it does not help. Tell the beginner what to do.

body { background: url(../img/background-min.jpg) no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

enter image description here

    2 answers 2

    It is solved, as described above, by replacing the background with the one that is dominant in your background image.

    And also, it is better to do compression either with special algorithms that compress the gotograph without loss of quality, or with services that work with similar algorithms. As an example kraken.io

      The image just does not have time to load. You can set the background color, such as blue, so that it is not so noticeable.

       body{ background-color: blue; }

      Or make a preloader

       window.onload = function(){ document.getElementById('preloader').style.display = "none"; }; 
       #preloader{ position: fixed; width: 100%; height: 100%; background: blue; display: flex; justify-content: center; align-items: center; } 
       <html> <head> <!-- Здесь должен быть стиль прелоадора ВНИМАНИЕ! Отдельно от основного стиля !--> </head> <body> <div id="preloader"><p>Загрузка...</p></div> <!-- После прелоадора идёт всё содержимое сайта И в самом конце подключаются стили и скрипты Так же js код для закрытия прелоадера--> </body> </html>

      Since the web page is loaded and processed sequentially from top to bottom, the preloader placed at the very top will be loaded first and will close the loading content. After a full page load, it will be closed by js code at the very bottom of the page.

      Hope helped.

      • It does not help, as a result - the blue screen instead of white, looks no less annoying - Alina Savchuk
      • @AlinaSavchuk I just gave an example, put the color you want - goodmice
      • And you can make a smooth appearance of background-image? Or does it not work like that? - Alina Savchuk
      • @ blinking occurs because the picture does not have time to fully load. I can paint a smooth appearance after the page or block is fully loaded, because in order for the background to appear, an already loaded background is needed - goodmice