Как сверстать шапку сайта?

Question

[kkolorid]

Доброго времени суток... Помогите, пожалуйста, сверстать такую шапку сайта:

Конкретно, не понятно, как сделать адаптивные части, которые слева и справа от контента:

Красным отмечены границы контентной части с фиксированной шириной. Всё остальное должно быть продолжением и растягиваться вместе с окном. Светлые блоки являются картинками, но боковые части нужно сплошным цветом залить.

Comments

[Ankhena]

Градиенты и background-size в помощь https://jsfiddle.net/s1ong0x9/

Answer 1

[Арсений Матыцин]

Если мы говорим о структуре:

<header>
    <div class="container">
     …

То для header можно использовать псевдоэлементы :before и :after с этим самым цветом в заливку. Ну а для того, чтобы это реализовать flex-box тебе в помощь.

Comments

[kkolorid]

Про такие штуки не знал, спасибо. Теперь осталось как-то автоматически получать ширину того, что слева и права от контентной части. Подскажите, в какую сторону в flex-box искать по этому поводу?

[Арсений Матыцин]

flex-grow

Answer 2

[HealSpirit]

https://jsfiddle.net/n5qzyjct/
так?

Comments

[kkolorid]

Ну, да, это понятно. Вопрос в том, как сделать так, что бы слева от контентной части был широкий адаптивный светло-серый блок, а справа - узкий. То, что Вы показали - у меня реализовано уже на втором скрине, просто в контентном блоке стоит ещё фон картинкой. Так вот нужно слева и справа сделать продолжения этой картинки. Так понятней?