Це означає, що зображення дублюється відповідно до розміру елемента, до якого воно застосовано, що може спричинити ефект подвоєння. Ви можете перевірити, чи це так, перевіривши стилі CSS елемента. Знайдіть властивість фонового повторення та переконайтеся, що для нього встановлено значення «без повторення», щоб запобігти ефекту мозаїки.
Використовуйте правило CSS background-repeat: no-repeat, щоб запобігти розміщеннюі використовуйте або background-size: cover, або background-size: contain, залежно від очікуваного результату поведінки заповнення зображення. Ось дуже описова стаття про згадані значення властивостей розміру фону: CSS – вміст і покриття.
Значення за умовчанням. Зображення повторюється стільки разів, скільки потрібно щоб покрити всю область малювання фонового зображення, причому зображення краю буде обрізано, якщо розмір області малювання не є кратним розміру вашого фонового зображення.
Щоб запобігти повторенню фонового зображення, ви можете використовуйте властивість CSS background-repeat зі значенням no-repeat . Синтаксис: фонове повторення: без повторення; . Це відобразить фонове зображення лише один раз.
Властивість background-repeat дозволяє:
- Встановіть фонове зображення для вертикального повторення вздовж осі Y, використовуючи значення repeat-y.
- Встановіть повторюване фонове зображення горизонтально вздовж осі x, використовуючи значення repeat-x.
- Встановіть повторення фонового зображення в обох напрямках за допомогою значення повторення.
Властивість background-repeat встановлює, чи/як буде повторюватися фонове зображення. За замовчуванням фонове зображення повторюється як по вертикалі, так і по горизонталі. Порада. Фонове зображення розміщується відповідно до властивості background-position.