Сделать фон больше размера container

Рейтинг: 0Ответов: 2Опубликовано: 23.03.2023

Подскажите как сделать фон таким образом. Контент находится в container 1500px. Размер блока с фоном 1700px.

Пробовал делать такую конструкцию

<orange-background>
<container>
</container>
</orange-background>

по итогу весь контент начинается не в контейнере а то левого края экрана. Какие еще способы есть развернуть такой фон?

Вопрос только в фоне, остальная разметка готова.

Ситуация

css html вёрстка
Источник: Stack Overflow на русском

Ответы

▲ 0

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.orange-background {
  position: relative;
}

.orange-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 100%;
  background-color: orange;
}

.container {
  position: relative;
  max-width: 800px; /* for example */
  margin: 0 auto;
}
<div class="orange-background">
  <div class="container">
    <h1>Content</h1>
  </div>
</div>

▲ 0

Центрируете благодаря margin: 0 auto; Ширину уменьшил, так как здесь поля узкие).

body {
  margin: 0;
}
div {
  display: block;
}
.orange, .orange2 {
  background-color: orange;
  width: 600px;
  margin: 0 auto 10px;
}
.container {
  width: 400px;
  height: 200px;
  background-color: gray;
  margin: 0 auto;
}
.orange2 {
  display: flex;
  justify-content: flex-end;
}
.orange2 .container {
  margin: 0;
}
<div class="orange">
  <div class="container">

  </div>
</div>

<div class="orange2">
  <div class="container">

  </div>
</div>