Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 1. Upload/overwrite:
- js/bootstrap.js
- js/bootstrap.min.js
- js/plugins.js
- css/animate.min.css
- css/bootstrap.css
- css/bootstrap.min.css
- css/font-awesome.css
- css/font-awesome.min.css
- css/vegas.min.css
- fonts/ --- all files
- 2. Open style.css and find "9.0 Overlay Styles". Add new code.
- /*--- Code Start ---*/
- .overlay {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- z-index: 0;
- }
- .overlay-color {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- background: #000A1E;
- background: rgba(0,10,30,0.5);
- opacity: 0.75;
- filter: alpha(opacity=40);
- z-index: 0;
- }
- .overlay-image {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- z-index: -1;
- }
- /*--- Code End ---*/
- 3. Open your .html file and replace code for overlays.
- Before:
- <!-- OVERLAY -->
- <div class="overlay"></div>
- After - all .html files - without section-slideshow-background.html:
- <!-- OVERLAY -->
- <div class="overlay">
- <div class="overlay-color"></div>
- </div>
- After - section-slideshow-background.html:
- <!-- OVERLAY -->
- <div class="overlay">
- <div class="overlay-color"></div>
- <div class="overlay-image"></div>
- </div>
- 4. Open main.js and find this code "function initPageBackground() {". Replace code:
- Before:
- function initPageBackground() {
- [...]
- [...]
- [...]
- }
- After:
- /*--- Code Start ---*/
- function initPageBackground() {
- if($('body').hasClass('image-background')) { // IMAGE BACKGROUND
- $('body').vegas({
- delay: 0,
- slides: [
- { src: "demo/bg-4.jpg" }
- ]
- });
- } else if( $('body').hasClass('slide-background') ) { // SLIDESHOW BACKGROUND
- $('body').vegas({
- delay: 5000,
- slides: [
- { src: "demo/bg-4.jpg" },
- { src: "demo/bg-5.jpg" },
- { src: "demo/bg-6.jpg" }
- ],
- timer: false
- });
- } else if( $('body').hasClass('kenburns-background') ) { // Kenburns BACKGROUND
- $('body').vegas({
- delay: 5000,
- slides: [
- { src: "demo/bg-4.jpg" },
- { src: "demo/bg-5.jpg" },
- { src: "demo/bg-6.jpg" }
- ],
- animation: [ 'kenburnsUp', 'kenburnsDown', 'kenburnsLeft', 'kenburnsRight' ],
- timer: false
- });
- } else if($('body').hasClass('section-background')) { // SECTION BACKGROUND
- $('.home .overlay-image').vegas({
- delay: 0,
- slides: [
- { src: "demo/bg-7.jpg" }
- ]
- });
- $('.about .overlay-image').vegas({
- delay: 0,
- slides: [
- { src: "demo/bg-2.jpg" }
- ]
- });
- $('.contact .overlay-image').vegas({
- delay: 0,
- slides: [
- { src: "demo/bg-3.jpg" }
- ]
- });
- $('.slideshow-1 .overlay-image').vegas({
- delay: 3000,
- slides: [
- { src: "demo/bg-4.jpg" },
- { src: "demo/bg-5.jpg" },
- { src: "demo/bg-6.jpg" }
- ],
- timer: false
- });
- } else if($('body').hasClass('youtube-background')) { // YOUTUBE VIDEO BACKGROUND
- if($('body').hasClass('mobile')) {
- // Default background on mobile devices
- $('body').vegas({
- delay: 0,
- slides: [
- { src: "demo/video/video.jpg" }
- ]
- });
- } else {
- $(".player").each(function() {
- $(".player").mb_YTPlayer();
- });
- }
- } else if($('body').hasClass('youtube-list-background')) { // YOUTUBE LIST VIDEOS BACKGROUND
- if($('body').hasClass('mobile')) {
- // Default background on mobile devices
- $('body').vegas({
- delay: 0,
- slides: [
- { src: "demo/video/video.jpg" }
- ]
- });
- } else {
- var videos = [
- {videoURL: "0pXYp72dwl0",containment:'body',autoPlay:true, mute:true, startAt:0,opacity:1, loop:false, ratio:"4/3", addRaster:true},
- {videoURL: "9d8wWcJLnFI",containment:'body',autoPlay:true, mute:true, startAt:0,opacity:1, loop:false, ratio:"4/3", addRaster:false},
- {videoURL: "nam90gorcPs",containment:'body',autoPlay:true, mute:true, startAt:0,opacity:1, loop:false, ratio:"4/3", addRaster:true}
- ];
- $(".player").YTPlaylist(videos, true);
- }
- } else if($('body').hasClass('mobile')) { // MOBILE BACKGROUND - Image background instead of video on mobile devices
- if($('body').hasClass('video-background')) {
- // Default background on mobile devices
- $("body").backstretch([
- "demo/video/video.jpg"
- ]);
- }
- }
- }
- /*--- Code End ---*/
- 5. Add your image url in "src".
Advertisement
Add Comment
Please, Sign In to add comment