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(https://dl.dropbox.com/u/3533396/SO/multibg/bg-a.png), url(https://dl.dropbox.com/u/3533396/SO/multibg/bg-b.png), url(https://dl.dropbox.com/u/3533396/SO/multibg/bg-c.png), url(https://dl.dropbox.com/u/3533396/SO/multibg/bg1.png); background-repeat: repeat-x; min-height: 300px; } 
       <div id="zabor"></div>