There is a background: url("some-img.png") repeat-x property. It is necessary that the some-img.png element some-img.png repeated along the х axis not until the end of the parent block, but a certain number of times (for example, 5 times horizontally). How to implement it?

    2 answers 2

    As an option - multibackgrounds

     div { height: 100px; background-image: url(http://www.graycell.ru/picture/small/romb.jpg), url(http://www.graycell.ru/picture/small/romb.jpg), url(http://www.graycell.ru/picture/small/romb.jpg), url(http://www.graycell.ru/picture/small/romb.jpg), url(http://www.graycell.ru/picture/small/romb.jpg); background-repeat: no-repeat; background-position: 0 0, 100px 0, 200px 0, 300px 0, 400px 0; } 
     <div></div>

    • I don't see it - Yuri
    • New Google Chrome - Yuri
    • Brought in Chrome Version 55.0.2883.87 m (64-bit) Win7 - soledar10
    • Oh, updated the page - it worked. But you must admit, the option is not cross - browser - Yuri
    • Browser Support - caniuse.com/#feat=multibackgrounds - soledar10

    There is such a crutch version with the creation of a background with an internal element:

     div { position: relative; width: 100px; height: 100px; border: 2px solid black; } div:before { display:block; position: absolute; top: 0; left: 0; width: 50px; height: 100px; content: ''; background-image: url(http://www.graycell.ru/picture/small/romb.jpg); background-size: 10px 10px; } 
     <div></div>