Могу ли я использовать максимальную ширину для контента, но полную ширину для фона?

Question

Я разрабатываю Wordpress-тему со страницей настроек темы. В этих параметрах можно установить максимальную ширину для веб-сайта, но у меня возникают некоторые трудности с областью содержимого.

Когда заполнено max-width, область верхнего и нижнего колонтитула получает max-width и margin: O auto;.

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

HTML:

<header class="site-header">
   <div class="header-wrapper"></div>
</header>
<main class="site-content">
   <article class="post-10">
      <header></header>
      <div></div>
      <footer></footer
   </article>
</main>
<footer class="site-footer">
   <div class="header-wrapper"></div>
</footer

CSS:

.header-wrapper,
.footer-wrapper,
article {
     max-width: 1366px;
     margin: 0 auto;
}

Я понял это:

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

Есть ли возможность установить одинаковые max-width для верхнего, нижнего и нижнего колонтитулов страницы и убедиться, что фон в области содержимого по-прежнему имеет полную ширину?

Answer 1

Если я понимаю, тогда ваш css должен выглядеть так:

.header-wrapper,
.footer-wrapper,
article header, article div, article footer {
     max-width: 1366px;
     margin: 0 auto;
}
article{
     width: 100%;
     background: blue;
}

, но только если для этих 3-х дивов внутри статьи установлено max-width

Представляет ли content-blockarticle?

Обновление

Я воссоздал кодовую ручку из https://css -tricks.com / full-width-Containers-Limited-width-родителей /

https://codepen.io/anon/pen/eaJyqV

Если это возможно, вы можете поместить изображение с position: absolute, а затем поместить текст с position: absolute поверх него, но я полагаю, ваш блок контента не делаетработай так; /

Answer 2

Вы можете активировать «широкое выравнивание» и «полное выравнивание», добавив add_theme_support( 'align-wide' ); в свой файл functions.php. Затем пользователь имеет возможность выровнять изображения по всей ширине области просмотра.

См. Также https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#opt-in-features

Но это для изображений, а не для фона.

Для фоновых областей / изображений вы можете попытаться создать обычные блоки (100% области содержимого), которые имеют настройки полей, такие как margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); (такие же, как в полноразмерных блоках Гутенберга) и padding-left / padding-right calc(50vw - 50%);: таким образом, блок будет охватывать всю ширину области просмотра, но область содержимого будет иметь ширину области содержимого (полная ширина минус отступ). Вам также придется добавить к этим значениям обычный отступ, который вы хотите использовать внутри столбца содержимого.