javascriptjqueryhtmlcssjquery-backstretch

How to add css to jquery backstretch?


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?


Solution

  • 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.