Как создать статическую сетку фоновых изображений

Question

Попытка создать фон страницы в CSS, который напоминает сетку различных изображений, все обрезаются и изменяются до одинаковой ширины и высоты.

В идеале этот фон будет извлекать случайные JPEG-файлы из определенной папки, которую я создаю (assets / images / background_photos), и каскадировать их вниз / поперек страницы в пределах предопределенного раздела.

Что-то похожее на прикрепленное изображение, но с несколькими изображениями вместо только плаката Звездных войн:

.movie_poster_background{
    background-image: url("background_photos/star_wars.jpg");
    background-size: 150px;
    width: 100%;
    height: 500px;
    position: absolute;
    z-index: -1;
    -webkit-filter: grayscale(1);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: gray;
    filter: grayscale(100%);
    opacity: 0.2;
}

Answer 1

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

.box{
    background-image: 
      url("https://picsum.photos/200/200?image=1069"),
      url("https://picsum.photos/200/200?image=1065"),
      url("https://picsum.photos/200/200?image=1066"),
      url("https://picsum.photos/200/200?image=1067"),
      url("https://picsum.photos/200/200?image=1068"),
      url("https://picsum.photos/200/200?image=1062");
    background-size: 200px 200px;
    background-position:0 0,200px 0,400px 0,
                        0 200px,200px 200px,400px 200px;
    background-repeat:no-repeat;
    width: 100%;
    height: 400px;
}

<div class="box"></div>