How to add css to jquery backstretch?

Question

So I was able to create a slideshow using the jquery backstretch.

     $.backstretch([
      'assets/images/main-01.jpg'
    , 'assets/images/main-02.jpg'
    , 'assets/images/main-03.jpg'
  ], {duration: 5000, fade: 850});

However, I wish to add a repeating-linear-gradient effect on the images

background-image:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 0.1) 3px);

Is it possible to apply the above css to the backstretch images?

Answer 1

Yes it is possible. You just need an overlay for the backstretch images:

#backstretch-overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
    background-image: repeating-linear-gradient(
        0deg, 
        transparent, 
        transparent
        2px, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 0.1) 3px
    );
} 

In this fiddle I attached backstretch to a container to have some control over it, but that is not particularly necessary.