I am trying to set up a way of randomizing the header background image of a website so that whenever it is visited it will be different (with the obvious chance of it being the same if randomly selected). I have researched methods using jQuery, however the location of the background-image is in the pseudo-selector for the class, ::before.
#header-wrapper {
    position: relative;
    background: #080808 url("images/overlay.png") repeat;
    top: 0;
}
    #header-wrapper:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url("images/foo.jpg");
        background-size: 100% 100%;
        opacity: 0.35;
    }
As of right I have the background-image: to just one, but that what I'm hoping for is to include it among and array of other images.
