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?

score 3 · Accepted Answer · answered Sep 25 '15 at 08:05

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.

score 0 · Answer 2 · answered Sep 25 '15 at 07:19

you can see me demo:

html {
    height: 100%;
    overflow-y: hidden;
}

body {
    background-image: url('http://dl.dropbox.com/u/515046/www/garfield-interior.jpg');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

DEMO

or

You just have to Include the jQuery library (version 1.7 or newer) and Backstretch plugin files in your webpage, preferably at the bottom of the page, before the closing `` tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
  // To attach Backstrech as the body's background
  $.backstretch("path/to/image.jpg");

  // You may also attach Backstretch to a block-level element
  $(".foo").backstretch("path/to/image.jpg");

  // Or, to start a slideshow, just pass in an array of images
  $(".foo").backstretch([
    "path/to/image.jpg",
    "path/to/image2.jpg",
    "path/to/image3.jpg"    
  ], {duration: 4000});
</script>

How to add css to jquery backstretch?

2 Answers2