Как сделать контент фиксированный, а фон на всю ширину?

Question

[freeman0204]

Есть шаблон со стандартной сеткой 960px 12 колонок с отступами 10px с каждой стороны.
Естественно шаблон верстаю адаптивный, код сетки написал. Как мне сделать так что бы весь контент был в контейнере 960px, а видимо фон и картинка что на фоне растягиваеться на всю ширину? Как правильно реализовать, имея сетку о которой я писал выше?

Если монитор буде за 2000px не может же эта фотка верхняя растянутся на такую ширину, в качестве потеряет и некрасиво будет, как ее можно ограничить? Если ее ограничить в размере то она будет меньше остального фона но больше контента. Что то не то получается... Может всему фону сделать max-width: 1020px? Именно такой размер шаблона.

Answer 1

[Андрей Ульдин]

В начале делаешь общий блок, которому ставишь фон, ограничиваешь его через max-width, а внутри кладешь враппер, который margin: 0 auto; width: 960px;

Comments

[freeman0204]

Ну а сетка уже в % (т.е. колонки) и получится резина + медиа кверис адаптив и получится то что нужно как я понимаю? max-width писать 1020px? И дело в том что фон разный, для шапки и футера темный, в банере фотография а ниже фото фон светлый. Как задать одному контейнеру разные фоны?

[freeman0204]

Имеете введу вот так https://htmlacademy.ru/courses/65/run/25 ?

[Андрей Ульдин]

почему? внешний контейнер будет тянуться вместе с фоном, а внутренний враппер будет ограничен 960 пикселями.