11

Is it possible to repeat a background image, but specify a number of pixels before the next repeat starts.

i.e. background: url(img.png) [after 40px] repeat-x;

I don't want to add empty space to the image.

gcoulby
  • 534
  • 2
  • 10
  • 20
  • Only way will be with images, which you don't want to add sasdly. – Jamie Hutber Mar 04 '13 at 11:09
  • No I have atleast a couple of hundred kilobytes of images just to make a virtual landscape then I have animated clouds a Forest, a fence but a lot of my audience will be in Georgian republic hence slowish Internet at times and don't want to overdo it when whats important is the content. I had to make a sacrifice and suffer the restrictions. – gcoulby Mar 04 '13 at 20:26

1 Answers1

4
background-repeat: space;
background-repeat: round; // round(520 / 100) = round(5.2) = 5

The browser will render five images in the space but adjust the image width to 104px (520px / 5). The image is made wider to fit the container. Full details here or read Background Size property

Sahil Popli
  • 1,967
  • 14
  • 21
  • 1
    Unfortunately, background-repeat space and round values are not yet supported on major browsers. This is from the article you reffered to: > "Two browsers support the space and round properties. Guess which ones? You’re wrong: it’s IE9 and Opera. At the time of writing, they are not implemented in Firefox, Chrome or Safari. It gets worse: When Firefox encounters space or round it falls back to repeat. When Chrome or Safari encounter space or round they fall back to no-repeat. In addition, the webkit browsers appear to recognize the properties but don’t render them correctly." – Maor Barazany Jan 14 '14 at 00:21