Как задать нестандартный фон

[Andrew_007]

Здравствуйте.

 

Подскажите пожалуйста как лучше задать фон, который выделен на макете стрелочкой.

Вырезать часть и размножить, как я понимаю не получиться.

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

 

Ссылка на макет: http://www.pixic.ru/i/L0G0f6N450k813a3.png

[Switch74]

ну можно сделать темный фон по всей ширине и размноженный по высоте

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

[FitTech]

Можно вырезать часть фона не по ширине, а вертикально и сделать repeat-y

[Switch74]

Можно вырезать часть фона не по ширине, а вертикально и сделать repeat-y

А если страница будет 300px-10000px?

[Andrew_007]

Можно вырезать часть фона не по ширине, а вертикально и сделать repeat-y

Рисунок немного волнистый, возникнут швы на стыках.

[Andrew_007]

ну можно сделать темный фон по всей ширине и размноженный по высоте

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

Пробовал подобным образом, только задавал темную полоску и градиент с прозрачностью для body, но почему-то не видно было размноженный фон, может неправильно градиент задал. Сейчас буду снова пробовать такое решение, только с учетом Вашего совета. Можно сделать двойной background для body, или нужно именно накладывать по верх него блок?

[Switch74]

я бы накладывал.

[Andrew_007]

Градиент я правильно сделал?

 

background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);

[Q4Dizzy]

http://www.colorzilla.com/gradient-editor/

[Andrew_007]

я бы накладывал.

Для лучшей кроссбраузерности?

[Great Rash]

http://codepen.io/GreatRash/pen/GgZVpj

[Switch74]

http://jsfiddle.net/v3tcry1e/1/

я бы накладывал.

Для лучшей кроссбраузерности?

и этого тоже.

Попробуйте сделать через множественные фоны, возможно вас устроит. Только попробуйте проверить на странице маленькой и очень большой.

[Andrew_007]

http://codepen.io/GreatRash/pen/GgZVpj

Это вариант решения о котором я вообще не догадывался, спасибо.

[Switch74]

у решения Great Rash есть нюанс с большими размерами страницы

[Andrew_007]

http://jsfiddle.net/v3tcry1e/1/

 

Зачем так много позиционирования? Можно сделать так: http://codepen.io/anon/pen/vEGoqJ

 

Или я неправильно понял или чего то не учел?

Edited December 16, 2014 by Andrew_007

[Switch74]

Позиционирования можно сделать меньше, если хотите, я только хотел донести смысл

[Andrew_007]

Позиционирования можно сделать меньше, если хотите, я только хотел донести смысл

Вопрос в том нужно ли оно вообще или достаточно будет сделать так: http://codepen.io/anon/pen/vEGoqJ

[Switch74]

так что у вас не получалось?

[Andrew_007]

так что у вас не получалось?

 

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

Если налаживать один слой на другой как Вы советуете - все получается. Спасибо за то что помогли разобраться.