Контент по центру, фон по ширине

Одна из часто встречающихся задач в современной верстке — центрировать контент, а фоны растягивать. Или какой-то из блоков должен занимать всю ширину окна, а другие центрироваться.

Создадим специальный класс, назовем его контейнер .container, целью которого будет задавать ширину и располагаться по центру. Ширина при этом может быть фиксированна в px или задана в % или vw. Или, возможно, вам понравится вариант, когда ширина ограничена максимальным значением, а до него может спокойно растягиваться. Это лишь нюансы, принцип работы при этом останется неизменным.

Пусть заказчик поручил нам сверстать header с фиксированной шириной

<header class="header container"> </header>

Свои собственные уникальные стили будут написаны в классе .header, а центрирование задаст .container

.container {
    width: 700px;
    margin: 0 auto
    }
.header {
    padding: 20px 0;
    }

Но что делать, если в какой-то секции должен быть фон на всю ширину окна?

Поступают просто. Добавляют задающие фон стили для самой секции, а контент внутри нее оборачивают в div с классом .container

<section class="promo">
	<div class="promo-inner container">
		<h1><code class="code">Компания Ромашка</code></h1>

		<p>Нашими ромашками можно украсить всё!</p>
	</div>
</section>

Поскольку содержимому блока потребуется задать свои уникальные стили, то нужно добавить второй класс (promo-inner)

See the pen (@Websitio) on CodePen.

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

Альтернативный вариант

Есть и другой способ сделать фон на всю ширину окна при фиксированной ширине контента.

Нужно сделать блок с фиксированной или ограниченной шириной, как и в предыдущем варианте, и потом создать для него псевдоэлемент. Этому псевдоэлементу задать абсолютное позиционирование с top:0 и left: 50%; transform: translateX(-50%) для центрирования по горизонтали, высоту, равную 100% высоты родителя и ширину равную 100vw. Но, если высота сайта больше высоты экрана, т.е. уже есть вертикальная полоса прокрутки, то ширина в 100vw даст побочный эффект в виде горизонтальной полосы прокрутки. И её нужно будет скрыть, задав для body {overflow-x: hidden}.

body {
  overflow-x: hidden;
}
.section {
  position: relative;
  max-width: 768px;
}
.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 100vw;
  height: 100%;
  background: #f00;
}

Мне больше симпатичен вариант с дополнительной оберткой (хоть и не люблю их), чем absolute, transform и еще и overflow, тем более на body.

Фон на половину окна

Есть задача еще интереснее, когда ширина окна делится пополам, в одной части картинка, а в другой контент. Но соль в том, что картинка тянется до края экрана, а текст не должен выходить за контентную ширину.

Задача делится на 2 случая. Первый - когда у текста фон безразличен:

See the Pen Фон на половину окна, контент фикс или ограниченный by Websitio (@Websitio) on CodePen.

В этом случае, когда картинка стоит в правой части блока, нужно задать overflow-x:hidden для body. Но, поскольку, это не очень красивый прием и не работает на смартфонах, всё-таки лучше создать дополнительную обертку на всю ширину окна и задать overflow для неё. Но в примере оставлю вариант без обертки.

И второй, когда фон под текстом должен быть однотонным и тоже доходить до края окна:

See the Pen Фон на половину окна, контент фикс или ограниченный. И фон со стороны контента тоже до края окна. by Websitio (@Websitio) on CodePen.

В обоих случаях для фона использованы псевдоэлементы.