Как разделить фоновое изображение на два одинаковых блока, для контента?

Question

[Karim2020]

Не могу справится с данной задачей. Именно хочется понять, как поставить два div в одном родительском... Чтобы получилось вот это.
Вот изображение , что нужно :

Вот html:


Вот css:
.header__{
width: 100%;
max-width: 1632px;
height: 66px;
background: url(../img/font/Rectangle%208.png) center no-repeat;
background-size: cover;

}

.left{
background: url(../img/font/Rectangle%208.png) center no-repeat;
width:50%;
display:inline-block;
height:100%;
float:left;

}
.right{
background: url(../img/font/Rectangle%208.png) center no-repeat;
width:50%;
display:inline-block;
height:100%;
float:right;

}

Comments

[Pavel Kuzyakin]

а какое изображение разделить нужно? у вас сплошная заливка же

[Ankhena]

1. Фон это один сплошной цвет. background-color
2. Вертикальная полоса - вертикальная граница одного из блоков.
3. 2 блока рядом ставятся с помощью display:flex (или grid) для родителя.
4. float придуман не для того, для чего вы пытаетесь его использовать.

Примерно так https://jsfiddle.net/3Lmykqf7/
Дальше самостоятельно доводите до ума.

[Karim2020]

Ankhena, Спасибо!

Answer 1

[SergGrey]

div это же блочный элемент
Задай родителю display: flex
И выровняй блоки по row оси