cssbackground-imagespacebackground-repeat

can you create space between background image repeats?


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.


Solution

  • 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