0

Can I have a repeating background image that would only be repeated an integer number of times?

   li span.counter {
      height: 34px;
      background-repeat: repeat-x;
      background-image: url(home/bk_counter.png);
      letter-spacing: 14px;
      text-indent: 7px;
      display: inline-block;
      color: $text;
      font-weight: 700;
      font-size: 22px;
      text-align: center;
    }

example

Indeed playing with letter-spacing property forces me to have the span going further.

Augustin Riedinger
  • 20,909
  • 29
  • 133
  • 206

2 Answers2

2

You have to use the Css Multiple Background property, as the example below:

 background-image:
   url(logo.png), 
   url(logo.png), 
   url(logo.png), 
   url(logo.png), 
   url(logo.png);
background-repeat:no-repeat;
background-position:center 0, center 56px,center 112px, center 168px, center 224px;

It works in modern browsers: IE9, Firefox 5+, Chrome 12+, Safari 3.2+, Opera 10.6+.

Giacomo Paita
  • 1,411
  • 2
  • 12
  • 21
0

You can't set the background of an element to repleat a set number of times. You'll have to find another option, possibly creating an element for the space you need.

AJak
  • 3,863
  • 1
  • 19
  • 28