I have three boxes with three different images, but I want the images at random rather than specific boxes, how would I go about this?

This is the HTML code for the three boxes, Even though I wanted them up to down they came out left to right, other than that this is me setting the three boxes

    <div class="container">
        <div class="box">
            <div class="blue"></div>
        </div>
        <div class="box">
            <div class="red"></div>
        </div>
        <div class="box">
            <div class="green"></div>
        </div>
    </div>
</body>
</html>

This is the css file. This is where I set the boxes to an exact image, but I have tried other ways to try to solve this but all came up to no use

.blue{
    width: 1750px;
    height: 300px;
    background-image: url(Images_File/Blue\ image.jfif);
    background-size: 200%;
    background-repeat: no-repeat;

}

.red{
    width: 1750px;
    height: 300px;
    background-image: url(Images_File/red\ Image.jfif);
    background-size: 200%;
    background-repeat: no-repeat;
}

.green{
    width: 1750px;
    height: 300px;
    background-image: url(Images_File/green\ Image.jfif);
    background-size: 200%;
    background-repeat: no-repeat;