Как отобразить пустой div с background-image в полную ширину этого img, и второй div поверх этого с прозрачным фоном?

Question

[dhat]

Как на этом сайте, под хедером с меню видна центральная картинка во весь экран, там она поставлена как фон для дива, внутри этого дива другой див и там повторяющаяся прозрачная картинка с эффектом тени поверх центральной картинки. Как это повторить в CSS? Почему див вообще не отображается пустой с картинкой на заднем плане? Методом тыка я пробовал разные варианты, что-то отображалось, но как-то не так...

codepen.io/dhatt/pen/GqbLVG?editors=1100

Оригинал - www.ap.org

Answer 1

[Алексей]

codepen.io/skazi_premiere/pen/RRzmRB?editors=1100

Comments

[dhat]

Благодарю!

Answer 2

[Ксения Михайлова]

1. выставлять размеры блоков
2. не вписывать в background-image параметр repeat

codepen.io/aarizona/pen/bZPyZy

Comments

[Ксения Михайлова]

а вообще такую тень логичнее на цсс писать

[dhat]

Я так понял тут ширина без высоты не работает? И не подскажете почему не надо repeat - ведь у нас наш фон тени повторяется на всю страницу. Не могу просто принципа понять :(

[Алексей]

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

[Ксения Михайлова]

Repeat - это свойство background-repeat, а вы его прикрепляетt к background-image. Та не работает.

Div по спецификации растягивается во всю ширину контейнера, и высоту содержимого. Я в примере вместо указания высоту и ширины контейнера положила невидимую картинку в самый глубокий контейнер.

[dhat]

Ксения Михайлова: точно спасибо!

Answer 3

[Ivan Bogachev]

В наше время можно уже использовать градиент + несколько фонов, а не дополнительный блок с картинкой.