How to add css to jquery backstretch?


Tags: javascript,jquery,html,css,jquery-backstretch

Problem :

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.


    CSS Howto..

    Responsive layout, how to keep text at bottom of dynamically resizing image

    How to put container div under menu using CSS

    how to align all text on left side and image on right size

    How can these images to fit on the screen?

    How to fix this cell in the GridView?

    Hide one div when showing another with JavaScript

    How to find number of style classes defined in a CSS file

    How do I make my css class footer go from the left to right side of the screen?

    how to add css for div tag

    How to make one list-item in menu higher than the others with CSS?

    Quick beginner CSS, how to “scope” styles?

    How to remove/reset/not inherit the CSS properties of a DIV/element/… within the same CSS document?

    How to create cascading menus in rails?

    Capybara how to check if 'li' of a given link has proper css class

    Getting unordered list in front of image slide-show in IE8, IE7 and probably IE6

    Bootstrap - How to move styles in HTML to the .css from the example

    How to manipulate Firefox UI with Addon SDK?

    Show DIV on hover of other DIV that is not parent with CSS or JS [duplicate]

    Wordpress: How to add a caption right-aligned to the edge of the image

    I want to bring css for select option. how to write for this image, sample output like this

    How to choose font different font-weight? use bolder one or just font-weight?

    Angular.js: How to change div width based on user input

    How Do I Trigger My jQuery Event?

    How to get divs 100% of browser using css?

    How to use nth-child() but not for child in CSS?

    How do you set the background color for a variable height page?

    CSS Border Color: How to set bottom border color?

    How do I align columns in the center of the page? [duplicate]

    How does Facebook generate the animated placeholder news items?

    How to add head section in a page that has layout template