Вопрос по верстке на всю ширину окна

Question

[Sergiu Mitu]

Помогите дельным советом, никак не могу понять как правильно, или более логично верстать блоки на всю ширину окна с картинкой на фоне. Вот к примеру такой макет. (картинка)
Каждый второй блок растягивается на всю ширину окна? как поступить в этом случае?
background-size? ведь не красиво получается если сайт откроют на мониторе с высоким разрешением...

Заранее благодарен.

Answer 1

[Алексей Кулешов]

Любой Responsive-фреймворк Вам в помощь, или:
1. Html, Body - width: 100%;
2. Общий контейнер (в котором вся страница) - width: 100%; background: #темный;
3. Секция контента - width: 100%; background-image: url(...); (через раз)
4. Внутри секции контейнер (ограничивает вывод контента) - width: 960px; (или проценты - Вам виднее)

P.S. В интернете полно похожих (бесплатных) шаблонов. Качайте и ковыряйте - обычно все становится понятнее... ну или в конец запутаетесь)))

Comments

[Павел]

ну и картинке в bg дать center , а так полностью согласен

[Алексей Кулешов]

... а ещё no-repeat, и ещё много-много разных плюшек))

Answer 2

[Maksim Zverev]

Один из множества вариантов:
codepen.io/m1skam/full/JzbeG

Answer 3

[Альберт Рашитов]

Если это не разовая верстка (будут еще), то лучше начать использовать фреймворки, например, Bootstrap. Верстать станет гораздо проще.