Looking to design a CSS page background that mimics a grid made up of various cropped and resized images all with the same dimensions.
The goal is for this background to fetch random JPEGs from a designated folder I will create (assets/images/background_photos) and display them across the page in a predefined section.
We envision something similar to the image provided, but with multiple images instead of just repeating the Star Wars poster: https://i.sstatic.net/2bTQn.png
.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;
}