All geek questions in one place

How to fade background contour images?

Rookie here .. I'm trying to make my static carousel background .. my current html looks something like this:

<body> <div class="pageContent"> </div> </body>

and my CSS:

 body { background: url('http://placehold.it/1600x1200') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

So, I would like the background to now cycle through the images and stay responsive. Can this be done easily with CSS3? or can I possibly wrap the contents of my html in a carousel using bootstrap? I could not find a good example of how to do this. Thanks in advance.

+6
source share
3 answers

jsBin demo

Full page gallery fade

I would do this using an absolute located DIV superimposed on the body . Replace in the DIV new image, then set the same image to body and hide the DIV as follows: (GRAY - body , SOrange - DIV )

Responsive background fade gallery logic

The increment of the current array of images is achieved by preliminary specifying ++counter .

Loop locking is achieved using the Remainder % operator to prevent the number of counters in the array from being exceeded.

The loop itself is executed inside the .fadeTo() callback function, just do a new iteration of the loopBg() function.

This is the necessary CSS:

 *{margin:0;padding:0;} /* Global reset */ html, body{height:100%;width:100%;} body, #bg{ background: #000 none 50% / cover; } #bg{ position:absolute; top:0; bottom:0; left:0; right:0; width:100%; height:100%; }

And jQ:

 var images = [ "bg0.jpg", "bg1.jpg", "bg2.jpg" ]; var $body = $("body"), $bg = $("#bg"), n = images.length, c = 0; // Loop Counter // Preload Array of images... for(var i=0; i<n; i++){ var tImg = new Image(); tImg.src = images[i]; } $body.css({backgroundImage : "url("+images[c]+")"}); (function loopBg(){ $bg.hide().css({backgroundImage : "url("+images[++c%n]+")"}).delay(2000).fadeTo(1200, 1, function(){ $body.css({backgroundImage : "url("+images[c%n]+")"}); loopBg(); }); }());

Edit: If you want the background to change but scrollable content, just add overflow:auto; on #page , as in this demo: http://jsbin.com/huzayiruti/1/

+12
source

Hello! for this you need to work with layers and jquery, for example:

 <div id="slider1_container"> <div><img src="image1.jpg" /></div> <div><img src="image2.jpg" /></div> <div class="wraper"> .........code </div> </div>

and in css you put the code to align the div front or back ... jquery looks like this:

 <script src="jquery.min.js"></script> <script src="jssor.slider.mini.js"></script> <script> jQuery(document).ready(function ($) { var options = { $AutoPlay: true }; var jssor_slider1 = new $JssorSlider$('slider1_container', options); }); </script> and css like that: position: relative; top: 0px; left: 0px; height: 1000px;

*> remember that this is just an example, you need to change the code to work as you

need.and there are always examples on the Internet that you can consult here: *

slider example

> I hope that helps you!

0
source

I ended up looking for a page that had exactly what I was looking for:

Bootstrap carousel as website background

will link to http://untame.net/2013/04/twitter-bootstrap-carousel/ , and about half a page will show you how to cover bootstrap without encoding any JQ except:

 $(document).ready(function() { $('.carousel').carousel({interval: 7000}); });

amazing!

-1
source

Source: https://habr.com/ru/post/975163/

More articles:


All Articles