Почему мое фоновое изображение не меняется на элементе?

Question

Я пытаюсь использовать одно фоновое изображение шириной 3 пикселя и высотой 89 пикселей. Каждая вертикальная полоса размером 1 пиксель будет фоном другого div.

Я предположил, что переход background-position на -1px 0 и установив background-size в 1px 89px бы изменить фоновое изображение на каждом div, но это не так. Вот javascript, который устанавливает фон css.

(function() { 
jQuery(".featuredBox").each(function (index, elem) { 
    jQuery(elem).css({ 
     "background-image": "url(http://i.imgur.com/mC7DQlt.png)", 
      "background-position": -index + "px 0", 
      "background-repeate": "repeat-x", 
      "background-size": "1px 89px" 
    }); 
}); 
})(); 

Вот скрипка, которая показывает, что я пытаюсь сделать.

http://jsfiddle.net/DGWsD/

=======================================

Вот ссылка на изображение:

http://i.imgur.com/mC7DQlt.png

Answer 1

опечатка повторить.

$(document).ready(function() { 
    $(".featuredBox").each(function (index, elem) { 
     $(elem).css({ 
      "background-image": "url(http://i.imgur.com/mC7DQlt.png)", 
      "background-position": -index + "px 0", 
      "background-repeat": "repeat-x", 
      "background-size": "1px 89px" 
     }); 
    }); 
}); 

Кроме того, нет необходимости немедленно вызывая выражения () в конце вашей функции. jQuery делает это для вас.

Updated Fiddle

Answer 2

вы не можете использовать часть изображения в качестве фона с помощью фона размер CSS свойство. background-size будет масштабировать изображение до заданного размера, он не займет его часть. и фоновая позиция будет применена ко всему фону, а не к отдельной части повторяющегося изображения. Поэтому вы можете повторить 1px * 89px 3px * 89px по горизонтали. вы можете попробовать это на http://www.w3schools.com/cssref/css3_pr_background-size.asp и еще одна вещь, чтобы заметить, что размер фона не будет работать ниже IE9.

Быстрое решение для этого использует Photoshop или краску вырезать изображение в 3-х частей 1px * 89px и вставить их в вертикальном положении, и вы можете использовать фоновое положение, Backround-повтор с соответствующим ПОлОжЕНИЕм значений повторить его горизонтально