Подскажите пожалуйста, каков лучший способ сверстать подобный «забор».
Основные моменты (если понадобятся):
Над забором просто однотонный бэкграунд
Под забором — паттерн (т.е. бэкграунд через
background-image
задается)
Подскажите пожалуйста, каков лучший способ сверстать подобный «забор».
Основные моменты (если понадобятся):
Над забором просто однотонный бэкграунд
Под забором — паттерн (т.е. бэкграунд через background-image
задается)
Я бы разбил на слои: зелёный фон с забором, и каждая из этих полупрозрачных форм поверх, с разными ширинами, чтобы они накладывались друг на друга неповторяясь.
#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>
Сделать отдельный слой, у макета забора найти повторяющуюся часть, обрезать и повторять через repeat-x.
Если не так, то лучше изложите свои "Основные моменты" на jsfiddle.