7

Rookie here .. I'm trying to make my static background become a carousel.. 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'd like to make the background now cycle images and stay responsive .. Can this be done easily using CSS3? or should I maybe wrap the contents of my html in a carousel with bootstrap? I wasn't able to find a good example of how to do this. Thanks in advance.

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
SuperVeetz
  • 2,128
  • 3
  • 24
  • 37

3 Answers3

13

jsBin demo

Full page gallery fade

I would do it using an absolute positioned DIV overlaying the body. Fade in the DIV with a new image, then set the same image to body and hide the DIV like: (GRAY is BODY, SOrange is DIV)

Responsive background fade gallery logic

The increment of the current image Array is achieved by preincrementing ++counter.

The loop fix is than achieved using Remainder Operator% to prevent the counter from exceeding the number of images in Array.

The loop itself is done inside .fadeTo() callback function by simply do a new iteration of the loopBg() function.

This is the needed 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 the 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 to keep the background changing but make the content scrollable, simply add overflow:auto; to #page like in this demo: http://jsbin.com/huzayiruti/1/

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • 1
    just wow! thanks for the great explanation and visuals. I'm really going to try and get this working on my page. Might take me a day or so.. but truly a great answer ! Thanks – SuperVeetz Sep 12 '14 at 03:52
  • (I fixed a small issue in the code (preload images loop was off, changed `i<0` mistake to `i – Roko C. Buljan Sep 12 '14 at 04:02
  • i actually noticed that and was wondering .. haha also, i noticed you loaded the jquery in your head on jsbin.. i thought jquery always needed to be loaded at the very bottom of your body? – SuperVeetz Sep 12 '14 at 04:13
  • This kicks ass! Is there a way to use media queries so that I don't have to load the very large image on small devices? Should I start another question about that? – Christina Sep 12 '14 at 04:26
  • @RokoC.Buljan this is so sweet but i have a small problem.. my page is really long so the background cuts off at a certain height.. i have set #bg to position: fixed.. and it appears to fix the problem only while the picture is fading in .. i feel like i need to set position: fixed to something else maybe .. i made a bootply to show u: http://www.bootply.com/hgxCjD3ATC# – SuperVeetz Sep 12 '14 at 06:43
  • 1
    @AlexDiVito you need just `overflow:auto;` see here: http://jsbin.com/fakosu/5/edit – Roko C. Buljan Sep 12 '14 at 16:04
  • 1
    @Christina thanks for the thumbs-heads-up! :) Yes, the 16:9 images are pretty small, 800x450. I would also dare with 640x360! what makes them look 'clean' even if resized is the opaque "pixelated" overlay. If you want to keep sharpness but at the same time you desire smaller images on mobile, you can detect the media on the first request using PHP and https://github.com/serbanghita/Mobile-Detect -> change the images paths, et voilà! – Roko C. Buljan Sep 12 '14 at 16:10
  • @Roko C. Buljan Thanks a ton for the help, i ended up using this method: http://untame.net/2013/04/twitter-bootstrap-carousel/ it was alot more intuitive for me since i am terrible at JQ and have been relying on bootstrap for basically all my functionality. – SuperVeetz Sep 12 '14 at 16:34
  • @AlexDiVito this is all it takes to change the effect: http://jsbin.com/fakosu/6/edit... I think I'll create a plugin out of this one with enhanced css3 transitions :) – Roko C. Buljan Sep 12 '14 at 16:49
  • hmm yah i can see how the JQ allows you to customize the way the background comes into view.. really cool! man i need to step up my game.. all in good time :P – SuperVeetz Sep 12 '14 at 17:03
  • @RokoC.Buljan Hey, I have uploaded my website @ http://www.folio.uphero.com/ and im pretty pleased with it, except when i viewed it on my ipad.. the background was not full-screen.. it is repeating for some reason.. any idea why? here is a bootply: http://www.bootply.com/lAas6oYLLj – SuperVeetz Sep 13 '14 at 16:54
  • fixed.. not exactly sure how, but i changed this to: body, #bg, html { background: #000 none 0 50% / no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } and it fixed my problem. – SuperVeetz Sep 13 '14 at 17:10
  • @AlexDiVito wow. Looks amazing! good job! (Just to warn you the images I used might be Copyrighted) :) – Roko C. Buljan Sep 13 '14 at 17:29
  • i am changing the images right now.. just wanted to make sure there were no bugs first .. also, is there a way to make the background image completely responsive? so that the full background image will show on mobile? or are there reasons that i wouldn't want that? thnx – SuperVeetz Sep 13 '14 at 17:40
  • Awesome, only one thing, how to choose random image? :D – candlejack Aug 26 '15 at 18:34
  • @alessadro you don't need the `++c%n` and the `c%n` code. Simply a `c` that is generated at random (making sure the number is not repeated, would be silly to see to same images one after another :)) set as that `c` variable. – Roko C. Buljan Aug 26 '15 at 20:36
  • @RokoC.Buljan Thanks for answer! Now I have a similar problem of AlexDiVito, I'm using bootstrap, `oveflow:auto;` don't work in my case :( – candlejack Aug 26 '15 at 20:37
  • @alessadro you're welcome to ask a new question - I'll try to take a look at it. (let me know here when you do) – Roko C. Buljan Aug 26 '15 at 20:38
  • @RokoC.Buljan Thanks, this is the SO post: http://stackoverflow.com/questions/32236477/how-to-fade-loop-background-images-in-twitters-bootstrap-3 – candlejack Aug 26 '15 at 20:50
0

> Hi ! for that you have to work with "layers" and jquery, 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 the css you have put the code for align the div in front or back ... the jquery is like that :

<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 is just example, you have to modify the code for work as you

need.and always exist examples in the internet you can consult here:*

example slider background

> regards I hope help you !

Felipe Valdivia
  • 369
  • 3
  • 18
-1

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

Bootstrap carousel as website background

will refer you to http://untame.net/2013/04/twitter-bootstrap-carousel/ and about halfway down the page will show you how to make a bootstrap background carousel without coding any JQ except for:

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

amazing!

Community
  • 1
  • 1
SuperVeetz
  • 2,128
  • 3
  • 24
  • 37
  • IMHO, tHe most horrible plugin you could find... you've found it! The carousel might work, but this is what it does to backgrounds: http://mode87.com/untame/demo/carousel/background.html (notice the *fade-to-white-cause-we-don't-know-how-to-work-out-transitions* effect!) – Roko C. Buljan Sep 12 '14 at 16:45
  • ugh well.. i ran into this problem where the background would disappear and just show whiteness whenever scrolling down the page so i am now in the process of switching back to Roko's answer! :P am having the same issue as before but overflow: auto; isn't working .. will make bootply if i can't figure it out soon.. – SuperVeetz Sep 13 '14 at 03:23
  • fixed it.. thnx again – SuperVeetz Sep 13 '14 at 03:30
  • ah it was a silly typo at height: 100%.. i had height: 100$% .. so it just looked like it was doing some the same thing as before but yah the background looks amazing.. and i'm thinking of adding a layer to #page as you had in your example.. i had originally thought that each image was layered in photoshop but i realized it after going through your example a 2nd time that you just had a background layer set to #page.. cool concept – SuperVeetz Sep 13 '14 at 03:48
  • nice typo :) Photoshop has nothing to do with CSS and JS. I found 3 images on google, 16:9 format at 800x450px, set them to change with JS; but with CSS3 i made them full-screen using the `cover` value. :) – Roko C. Buljan Sep 13 '14 at 03:54
  • but that border around the edges and the layer that looks like it is just tons of lightly transparent dots overtop of the pictures.. i thought that was some CSS and a blank photoshop img with that layering or something. hm – SuperVeetz Sep 13 '14 at 03:58
  • nope, it's simply a Base64 encoded 4x4px png transparent pattern. see: http://jsbin.com/vuzubo/1/edit?html,css,output see my comments on @Christine comment on my answer. It's used to dim the background lightness and add more focus to the overall website text contrast. But also to make small images look good! The images are set for `body` and `#bg` (for the fade effect as explained in my graphic), while the overlaying `#page` has that .png to cover em all. – Roko C. Buljan Sep 13 '14 at 04:02
  • If you look closer, while the animation runs, the "pixelated" pattern stays in place, so it's not part of the image and there's no talk about Photoshop :) – Roko C. Buljan Sep 13 '14 at 04:08
  • this is crazy .. !! where does the png come from?? i've known for a while that i needed to darken the background somehow to make the text easier to read .. my site is looking kinda pro now :D – SuperVeetz Sep 13 '14 at 04:11
  • 1 last thing: what does do? is this for mobile viewport? – SuperVeetz Sep 13 '14 at 04:13
  • No, it's a way to say the browser to use character encoding as `UTF-8`. For example, me being from Croatia and using characters like šđč枊ĐČĆŽ they would resuld as strange ASCII equivalents if StackOverflow did not used that same `meta` in http://en.wikipedia.org/wiki/UTF-8 – Roko C. Buljan Sep 13 '14 at 04:16
  • About Base64 encoded images you can find tons of answers on the web. If you want to get a base 64 encoded string from an image, to use as image or bg-image I've created a small tool: http://jsbin.com/jequq/1/edit – Roko C. Buljan Sep 13 '14 at 04:24
  • Here you can see how I used a simple `` tag with a base64 string returned from that tool: http://jsbin.com/cipiqi/1/edit OK, it's a huge amount of text, but for a 4x4 .png pattern I like it! Remember that a Base64 encoded image is usually ~25% bigger than the actual image size. – Roko C. Buljan Sep 13 '14 at 04:26
  • very cool .. im gona play around with that mario head just to get an idea of how that would look on a website with another background .. but thanks a ton.. great info! – SuperVeetz Sep 13 '14 at 04:32
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/61175/discussion-between-alex-di-vito-and-roko-c-buljan). – SuperVeetz Sep 13 '14 at 17:53
  • Without any JQuery except it uses JQuery! – Rob Aug 30 '17 at 21:27