Сергей delphinpro

Ну так же и продолжайте, как начали https://jsfiddle.net/DelphinPRO/vhtbe7v5/1/

https://jsfiddle.net/DelphinPRO/8ex48rkb/

https://jsfiddle.net/DelphinPRO/kmb8s10a/

Как вам и нужно. IE/Edge в пролёте, да и фиг с ним.

https://codepen.io/delphinpro/pen/GveGEY?editors=1100#

Неизведанные глубины CSS: метрики шрифта, line-hei...

Вставлю свои пять копеек https://codepen.io/delphinpro/pen/GmRJBJ

Оба варианта эквивалентны этому:

<main>
  <section>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque fugiat
    harum in modi odit quas sit temporibus.
    
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate fuga
    hic minima provident quisquam quod repudiandae voluptate? Consequatur in,
    necessitatibus.
  <section>
</main>

Так в чем вопрос?
Да к тому же ваша секция не содержит заголовок. А должна бы...

Вот нашел ту старую блок-схему, просвещайтесь:

Без js можно, но ограниченно и не одинаково в браузерах.
Для вебкитов (лучшие возможности, можно оч хорошо сделать)
https://gist.github.com/delphinpro/266c7a76e614e1c...
Для IE/EDGE тоже есть стили
В FF нет возможности стилизации.

js решения более кроссбраузерны и дают больше возможностей.
лучшее из существующих решений, это https://github.com/Diokuz/baron

Со скриптом не подскажу, это не интересно.
А вот на "чистом" css поколдую =)

https://codepen.io/delphinpro/pen/vJrwzW?editors=1100

Disclaimer. Решение задачки чисто академическое. Не для практического использования.

https://jsfiddle.net/8f1p0a9o/4/
https://jsfiddle.net/8f1p0a9o/5/

Элементарно
https://jsfiddle.net/15m3m8cp/1/

Не нужно делить мир на черное и белое. В нем гораздо больше оттенков.

И снова мой старый добрый пен с флексовыми плитками =)
https://codepen.io/delphinpro/pen/BWJEgG

Я вижу два варианта

Если у вас возможно фиксировать ширину сайта, то делаем примерно как в бутстрапе точки 576-768-992-1200, контейнеры чуть меньше точек. За счет того, что в пределах каждого брикпойнта ширина фиксирована - никаких проблем. Количество точек добавить/убавить по вкусу/ТЗ

Если сайт резиновый, то количество основных точек выбирается примерно как в первом варианте. Плюс дополнительно ставится брикпойнт везде, где ломается дизайн. Этот вариант, понятно более трудозатратен.

https://jsfiddle.net/u5vypq19/2/

Ну скину свой вариант еще раз https://codepen.io/delphinpro/pen/BWJEgG

#back {
  background-size: cover;
  background: url(mainSpidey.jpg) no-repeat 100% 0;
}

Проблема в порядке свойств.
background - это короткий вариант записи множества свойств для задания фона:

background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-color

И это свойство перезаписывает все параметры фона.

Как-то так выглядит полная запись вашего случая

#back {
  background: url(mainSpidey.jpg) no-repeat 100% 0 / cover;
}

Или просто поменяйте местами строчки

#back {
  background: url(mainSpidey.jpg) no-repeat 100% 0;
  background-size: cover;
}

https://unicode-table.com/ru/200B/

Проще всего сделать SVG фигуру.
Почему все забывают про такой мощный и хорошо поддерживаемый инструмент? =)

https://codepen.io/delphinpro/pen/EXWexm