Please tell me what is the best way to create such a "fence" .

Highlights (if needed):

  1. Over the fence just plain background

  2. Under the fence - a pattern (i.e., the background through the background-image is set)

    2 answers 2

    Make a separate layer, in the layout of the fence, find the repeating part, trim and repeat through repeat-x.

    If not, then better state your "Highlights" on jsfiddle.

      I would break it into layers: a green background with a fence, and each of these semi-transparent forms on top, with different widths, so that they overlap each other without repeating.

       #zabor{ background-image: url(, url(, url(, url(; background-repeat: repeat-x; min-height: 300px; } 
       <div id="zabor"></div>