Css - изображение на мобильном телефоне нарушено

Question

Я создаю свой собственный веб-сайт портфолио и на мобильных устройствах мои фоновые изображения ведут себя странно.Когда я открываю страницу, иногда фоновое изображение работает отлично, а иногда выглядит очень плохо.

Я спрашивал один раз, но этот подход не решает мою проблему.

Css - как остановить сглаживание изображения с размером обложки?

Веб-сайт: https://jozefrzadkosz -portfolio.pl

Класс CSS на рабочем столе:

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('~/header_train.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    filter: brightness(30%) sepia(0.3);
    -webkit-filter: brightness(30%) sepia(0.3);
  }

и на мобильном телефоне:

@media only screen and (max-width: 768px) {
  header {
    .background-image {
      background-attachment: initial;
    }
  }
}

Изображения фонаизображение, снятое на мобильный телефон:

Answer 1

Просто добавьте background-repeat: no-repeat; в свой класс, как показано ниже:

.background-image {
    position: absolute;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('~/header_train.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    filter: brightness(30%) sepia(0.3);
    -webkit-filter: brightness(30%) sepia(0.3);
  }

Я добавил его в ваш класс рабочего стола, потому что таким образом он должен применяться и к «мобильному» представлению, однако, если вы сталкиваетесь только с этимпроблема на мобильном телефоне, попробуйте добавить его на мобильный класс.(см. ниже)

@media only screen and (max-width: 768px) {
  header {
    .background-image {
      background-attachment: initial;
      background-repeat: no-repeat;
    }
  }
}

Answer 2

изображение повторяется, поэтому добавьте его в css: background-repeat: no-repeat;