Как растянуть фоновый цвет на всю ширину экрана?

Question

[suprascapularis69]

Здравствуйте!

Сверстан макет шириной 1440px, есть некоторые блоки с фоном, такие как features


На разрешениях больше 1440 фон логично обрывается по бокам, так как у этого блока родитель это контент-обертка, шириной 1440. Но необходимо, чтобы у блоков с фоном на разрешениях больше 1440 сам фон занимал всю ширину экрана. Как это правильно сделать?

https://suprascapularis69.github.io/task2/

Comments

[Ankhena]

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

Answer 1

[AntVlad]

Назначить свойство background-color для тега body?!

body {
    background-color: white; /* ну, или какой там у Вас цвет */
}

Comments

[suprascapularis69]

фон есть только на определенных блоках

[AntVlad]

suprascapularis69, как я понял из вопроса, в фоне не картинка, а именно, цвет, так что нет проблемы присвоить этот цвет (да и картинку тоже) всему body. Или я не правильно понял задачу?

[suprascapularis69]

AntVlad, задача в том, чтобы понять как сделать, чтобы фон вышел за рамки контентной обертки при разрешениях с шириной больше максимальной ширины обертки

[AntVlad]

suprascapularis69, как я сразу сказал, так это и делается. Фону не надо выходить за рамки существующих или несуществующих блоков. Фон надо присвоить тегу body, и всё! Попробуйте. ;)

Можно ещё указать для надёжности

@media only screen and (min-width: 1440px) {
    body {
        background-color: white;    }
}

[suprascapularis69]

AntVlad, фон нужен не в пределах body, а в пределах блока, которому присваивается фоновый цвет. У некоторых блоков разные цвета

[AntVlad]

suprascapularis69, тогда так:

@media only screen and (min-width: 1440px) {
    features {
        background-color: white;
    }
}

[suprascapularis69]

AntVlad, то, что вы написали похоже на переопределение уже существующего и так для всех разрешений фона

[AntVlad]

suprascapularis69, или может блок-обертку при расширении больше 1440 сделать шириной в 100%?

@media only screen and (min-width: 1440px) {
    #wrapper {
        width: 100%;
        background-color: white;
    }
}

[suprascapularis69]

AntVlad, по заданию контент не должен занимать больше 1440px

[AntVlad]

suprascapularis69, тогда ещё один блок-обертку, который будет растягиваться и окрашиваться в нужный фоновый цвет. А обертка с содержимым пусть остается max-width: 1440px.

Answer 2

[ThunderCat]

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

/*добавить после родного стиля*/
.wide-block { 
  margin-left: calc(( 1440px - 100vw ) / 2);
  margin-right: calc(( 1440px - 100vw ) / 2);
  padding-left: calc((( 100vw - 1440px ) / 2) + 165px);
  padding-right: calc((( 100vw - 1440px ) / 2) + 165px);
}

Answer 3

[Артём]

можешь сделать так. сделать контейнер и глав. родительский элемент у меня структура такая

<div class="element">
    <div class="container"> 
       <div class="element__body">
       </div>
   </div>
</div>

и я задаю фон для всей ширины так

.element{
  background: #000;
}
.container{
 width:100%;
max-width: 1440px;
}

цвет фона на всю ширину задается и контейнер 1440 пикселей