Можно ли покрыть изображения из API на весь экран?

Question

Я пытаюсь отцентрировать и закрыть изображение на весь экран, который исходит от Unsplash Source API .

Я думаю, потому что изображение на самом деле выводится после того, как CSSуже применено, оно не работает так:

(если демонстрация может показаться закрытой, запустите ее в полноэкранном режиме)

html, body {
  margin: 0px;
  width: 100%;
  height: 100%;
 }
 
 .centered-image {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;
    background: url(https://source.unsplash.com/collection/1228371) no-repeat center center fixed;
 }

<div class="centered-image"></div>

Ребята, вы знаете, как обойти?

Answer 1

.centered-image {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
    width: 100%;
    background-repeat: no-repeat;
    height: 100%;
    background-image: url(https://source.unsplash.com/collection/1228371);
}

Внесены некоторые изменения в CSS.Попробуйте это.