позиционирование блоков относительно фона

[ishurgaya]

Здравствуйте. нужен совет ,как лучше сверстать.

 

есть полосатая фоновая картинка  с горизонтальными полосами.

и нужно расположить прямоугольные блоки так чтобы эти блоки по высоте всегда помещались в эти линии.

 

 

 

проблема в том что фоновое изображение должно быть резиновое ,поэтому высота полос фонового изображения разная на разных экранах.

и блоки адаптивные , т.е не получится обернуть полоску блоков в контейнер и задать им фон, так как количество блоков расположенных в горизонтальной полосе будет меняться в зависимости от размера экрана.

 

посоветуйте ,как справиться с этой задачкой.

Edited September 24, 2015 by ishurgaya

[Jack_V]

Или начните сами делать в онлайн-редакторе. Или свяжитесь по почте morkarak@yandex.ua - помогу видя сам макет.

[ishurgaya]

ну в общем ,пытался делать так, но не получается.

Edited September 25, 2015 by ishurgaya

[Jack_V]

>высота полос фонового изображения разная на разных экранах.
>количество блоков расположенных в горизонтальной полосе будет меняться.

То есть расположение блоков должно подстраиваться под фон? Хардово, нужно подумать :-D

Хотя я не понимаю, на кой черт нужно растягивать фон во вертикали.

[ishurgaya]

да задачка не так проста ,как кажется с первого взгляда.

 

есть ли смысл для ее выполнения использовать javascript?

 

пробовал чтобы при изменении размера браузера , определялась ширина страницы и делилась на ширину одного блока .

 

тем самым мы находили количество блоков ,которые помещались в вертикальной линии (напомню страница,что верстка адаптивная)

 

и на js оборачивал в одной строке в div  у которого прописаны в стилях кусок фоновой  картинки (одна полоска)

window.onresize= message; function message() {  var h = $('div.block').css('width'); var ch = Number(h.replace(/\D+/g,"")); var count = Math.floor(ch/170); //считаем количество блоков помещающихся в ширину экрана браузера ,170px ширина прямоугольного блока  while(($children = $(':not(.row)>.item:lt('+count+')')).length) {	$children.wrapAll($('<div class="row"></div>')); }} 

или есть способы проще ?

 

или лучше без js и у фоновой картинки задать background-size и  менять этот стиль через media запросы ,в разных размерах браузеров?

Edited September 25, 2015 by ishurgaya

[Jack_V]

Вообще в теории можно бы было задать фон градиентом, и размещать блоки в этом градиенте рассчитав все необходимые параметры. 

[ishurgaya]

в общем сделал через media запросы :

@media (min-width: 608px){  .fon {		       background-size: 100% 100%; }}@media (min-width: 768px) {  .fon {		background-size: 100% 119%; }}@media (min-width: 992px){ .fon {		background-size: 100% 119%; } }@media (min-width: 1200px) { .fon {		background-size: 100% 148%; }}

осталось чуть-чуть откалибровать высоту фона  на разных экранах . и задать высоту фона на экранах свыше 1200px и мобильных