Не работает значение repeat у свойства background

504

28 августа 2017, 07:27

Необходимо поставить бесшовный фон на сайт. Скачиваю картинку небольшого размера, прописываю в CSS background-image: url (); repeat;, но какую картинку бы я не ставил, любая из них очень сильно растягивается и вместо четкого фона состоящего из небольших узоров бесшовных, получается что картинка размером 20х20 растягивается на весь экран и получается уродство.

Какие свойства прописать что бы это исправить?

Answer 1

Скорее всего сайт работает на каком-то готовом шаблоне. И свойство, растягивающее картинку на весь экран тоже там уже прописано. Соответственно - надо не добавлять, а убрать свойство растягивающее картинку на весь экран.

Открывайте инспектор кода и ищите где у вас уже прописано свойство background-size.

Далее - можно либо удалить это свойство, либо прописать background-size: auto !important;, либо задать правилу больший приоритет с помощью селекторов

Answer 2

background-repeat: repeat;
background-size: 100%;

Answer 3

Если background-repeat: repeat !important; прописанный в CSS не отменяет, то если лень искать его? Где он прописан, тогда уж прописать его прямо в HTML

<tag style="background-repeat: repeat !important; background-size: auto;"></tag>

В данном случае, он отменит все и будет читать только это правило... А если он прописан где-то ещё в JS... То добавь в JS строку elem.style.backgroundSize = '100%'; И что бы данный файл JS был ниже всех прописан в body прямо над тегом body

Тогда это правило будет читаться последним и его не должно ничего изменить

Answer 4

background-image: url (); repeat;

Убери пробел перед скобкой
Поменяй background-image на background
Убери точку с запятой перед repeat

html, body, div { 
  height: 100%; 
  margin: 0; 
} 
 
div { 
  background: url(//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=48&d=identicon&r=PG) repeat; 
}