repeat css background image a set количество раз

Question

Есть ли способ установить количество повторений фонового изображения с помощью css?

Answer 1

no.

вы можете установить абсолютную ширину для поля , но нет опции css для повторения изображения n раз.

Answer 2

Безобразные обходной может быть вставив несколько раз -statically- тех же изображений (с использованием multiple backgrounds):

Е.Г. Повторять по горизонтали изображение (80x80) три раза:

background-image: url('bg_texture.png'), 
        url('bg_texture.png'), 
        url('bg_texture.png'); 
background-repeat: no-repeat, 
        no-repeat, 
        no-repeat; 
background-position: 0 top, 
        80px top, 
        160px top; 

Берегись: не работает на IE до 9 версии (source).

Answer 3

Вы можете комбинировать несколько jQuery с CSS для достижения желаемого.

Скажите, что вы хотите отображать изображение foo.png 3 раза по горизонтали и 2 раза по вертикали.

CSS:

body { 
    background: url('foo.png'); 
} 

JQuery:

$(document).ready(function() { 
    $('body').css('background-size', $(window).width()/3 + 'px ' + $(window).height()/2 + 'px'); 
}); 

Кроме того, вы можете вставить один и тот же код в $ (окна) .resize(), чтобы получить динамическую характеристику.

Answer 4

Я не уверен, что изначально мотивировало этот вопрос, но я нашел, что он ищет способ убедиться, что появляется только целое число копий фонового изображения (т. Е. Не обрезать конечный элемент повторного набора фоновые изображения.) Это может быть достигнуто с помощью свойства background-repeat: space.