Using this background slideshow with JQuery, I need the whole images to fit inside the div

Question

I've set the .content div to height and width:auto, i want to force the image to fit inside the div without changing aspect ratio.

Here is the jquery:

    var images = ['pic1.jpg', 'pic2.jpg',   'pic3.jpg', 'pic4.jpg','pic5.jpg', 'pic6.jpg'];
    $(function () {
        var i = 0;
        $(".content").css("background-image", "url(pics/bg/" + images[i] + ")");
        setInterval(function () {
            i++;
            if (i == images.length) {
            i = 0;
        }
        $(".content").fadeOut("slow", function () {
            $(this).css("background-image", "url(pics/bg/" + images[i] + ")");
            $(this).fadeIn("slow");
        });
    }, 6000);
});

score 1 · Answer 1 · answered Mar 14 '16 at 19:42

add to the css "background-size","cover" OR try "background-size","contain" if images are different sizes and you need to manipulate further you can get the width or height properties and make a case statement to decide which way to crop. more information or an example would have been helpful.

score 1 · Accepted Answer · edited Mar 14 '16 at 20:31

1

try using:

.content {
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

And simply replace the image within the loop as demonstrated on: https://css-tricks.com/perfect-full-page-background-image/

edited Mar 14 '16 at 20:31

JanS

2,065
3
27
29

answered Mar 14 '16 at 20:17

Mitch Lamers

126
4

thanks much.. every simple and effective.. thanks for the link also.. now i'm having another issue, i had content in the div, just wanted an image background.. what is happening now is that the background image and the content in the div is fading in and out.. how can i fix this? – Juice Mar 15 '16 at 04:35
as you are fading in and out the .content class this will also fade out the content that is actually within this class. I found a similar question with an answer here [link]http://stackoverflow.com/questions/5533171/fade-background-image-in-and-out-with-jquery – Mitch Lamers Mar 15 '16 at 06:28
check it out here.. http://stackoverflow.com/questions/36004086/how-can-i-fade-are-background-image-in-and-out-using-jquery-in-a-parent-div-with – Juice Mar 15 '16 at 06:39

Using this background slideshow with JQuery, I need the whole images to fit inside the div

2 Answers2