Как сверстать такой бэкграунд для header в bootsrap?

Question

[Kai_azr]

Собственно вопрос, как сделать такой фон для навигационной части header ? содержимое центрируется в контейнере, а как сделать фон для двух кусков серый и синий, которые тянутся на всю ширину окна?

Comments

[Иван]

я вот не пойму, вы кроме бутстрапа, учили css вообще?

Answer 1

[iBird Rose]

да хоть градиентом который по середине будет из серого в синий переходить

Comments

[dom1n1k]

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

[iBird Rose]

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

[dom1n1k]

2 колонки там - ну просто дизайнер выровнял по сетке, чтобы красивее было.
Но завтра менеджеру захочется вместо Signup today написать Signup today for free - и все поломается.

[Serj-One]

dom1n1k: Нормальное решение. Градиент 50/50 для всего хедера от края до края, сверху перекрытие границы градиента фонами блоков в контейнере. Куда менее костыльно, чем плашка псевдоэлементом.

Answer 2

[Егор Живагин]

да хоть два блока сделать, один синий, другой серый

Answer 3

[Артём]

Два div'ника с background: #color; Не?