CSS. Как сделать общий фон у двух блоков?

Question

[DTX]

Из примера должно быть понятно, чего хочу.

https://jsfiddle.net/k5rpn3nj/1/

Answer 1

[Сергей delphinpro]

https://jsfiddle.net/k5rpn3nj/3/
но тоже есть нюансы

Comments

[DTX]

Спасибо!
А про нюансы пару слов можно?)

[Сергей delphinpro]

DirecTwiX: Фон фиксирован относительно окна браузера. При прокрутке будет виден эффект. не всегда он нужен. Если применять к повернутым элементам (transform:rotate) то в некоторых браузерах будет неожиданный эффект. Ну еще что-то...

Answer 2

[xmoonlight]

https://jsfiddle.net/k5rpn3nj/2/

Comments

[DTX]

А если они в разных контейнерах находятся? Как, например, левые и правые панели на тостере.

[xmoonlight]

DirecTwiX: ну значит бэкграунд к родительскому html и/или body

[DTX]

xmoonlight: а в других всех переопределять фон? Больше нет вариантов?

[xmoonlight]

DirecTwiX: чтобы фон был единым целым - нет. Переопределять внутренние - можно добавлением ОТДЕЛЬНЫХ классов, отвечающих только за фон.

[DTX]

xmoonlight: понял, спасибо

[xmoonlight]

DirecTwiX: Не за что. Ответом то отметите? ;)

[DTX]

Надежда умирает последней)
С background-attachment поинтереснее выглядит

[xmoonlight]

DirecTwiX: ну согласен, что интереснее.. Но действительно, применимо в меньшем ряде случаев...

Answer 3

[Great274]

https://jsfiddle.net/k5rpn3nj/4/
А не проще так