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.