Develop Reference

Changing Image position when scrolling page

I'm new to javascript and wanna create a HTML page and would like to make an image like floating on my page and it will interacting when user scrolling up and down of the website but I just couldn't figure it out. Anyone has idea how to deal with it?
<script>
$(window).scroll(function () {
//You've scrolled this much:
// $('p').text("You've scrolled " + $(window).scrollTop() + " pixels");
var doc = doc
var x = document.getElementsByClassName("ImageTesting");
//x.style.top = "$(window).scrollTop()";
x.css({'top': $(window).scrollTop() +'px'});
console.log($(window).scrollTop() + "px")
//console.log(x.style.top)
});
</script>

You can achieve the same behavior using css's sticky property
.ImageTesting {
position: -webkit-sticky; /* safary */
position: sticky;
top: 0;
}

You can do it with simple CSS properties first mentioned above The CSS Sticky property with image tag or just
<div class="bgFloat"></div>
<style>
.bgFloat {
background-image: url(image.jpg);
background-attachment: fixed;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
</style>
It will help you to fix the image position as background. Or if you want to continue with image tag then follow the 'position: sticky; top:0' or where ever you want to place your element.

Image Carousel with Fade to Black Transition

I need to make a carousel with a fade transition that goes black, or even better some dark grey color like #2B303A. I've found this code on the web that works perfectly, the only problem is that the fade effect is a really bright white that I don't like and it's bothering for the eyes.
How can I make it fade to black between images?
$(document).ready(function() {
//Carousel
var vet_url = ["https://i.imgur.com/Bb39Qpp.jpg", "https://images.wallpaperscraft.com/image/palms_road_marking_123929_1920x1080.jpg"];
var len = vet_url.length;
var i = 0;
function swapBackgrounds() {
$("#background").animate({
opacity: 0
}, 700, function() {
$($("#background")).css('background-image', 'url(' + vet_url[(i + 1) % len] + ')').animate({
opacity: 1
}, 700);
});
i++;
}
setInterval(swapBackgrounds, 10000);
});
#background {
background-color: #2B303A;
position: absolute;
z-index: 1;
min-height: 100%;
min-width: 100%;
background-image: url("https://images.wallpaperscraft.com/image/palms_road_marking_123929_1920x1080.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background"></div>
View on JSFiddle

you need to do it on the html element, in your test case at least.
html
{
background-color:#2B303A;
}

Setting the opacity to 0 let you see the element underneath the carousel, in this case there's nothing but the body itself. The background-color of the body wasn't set so it was the default white one. Setting the background-color to black solved the problem.

jquery's .animate does not work with background-colors though it can work with:
https://github.com/jquery/jquery-color

Aspect Ratio Fill - the right way

I know, it has been asked before. The answers are insufficient although they are marked as correct.
I need something that fills a container with an image by showing the most of the image, centers it and preserves its ratio. Should be ajquery-plugin, a angular-directive or plain JS.
<div ratio-fill>
<img>
</div>
Of course should be enough where the script takes action then.
Solution for interest:
<div ratio-fill="http://img.url"></div>
CSS
*[ratio-fill] { background-size: cover;
background-position: center; }
Script (jQuery)
/* img-ratio-fill */
$(window).load(function(){
/* ratio-fill-directive */
$('*[ratio-fill]').each(function() {
var $this = $(this),
imgUrl = $this.attr( "ratio-fill" );
$this.css( "background-image", "url('" + imgUrl + "')" );
});
})

with css on the DIV
background-size: cover; background-position: center;

IE8 Background-size not working

I'm trying to fill that my image fits the size of the DIV.
I already find that "background-size: contain" is not working for Internet Explorer 8.
Is there a possible workaround for my specific code.
.thumb {
/* Select a maximum height and width to allot for each thumbnail. Set margin size here as well. */
height: 125px;
width: 135px;
/* Do not edit these properties. */
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
In my javascript:
$('.thumb:' + place).css("background-image", 'url(' + entry.thumbnailURL + ')');
$('.thumb:' + place).css("filter", 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + entry.thumbnailURL + ',sizingMethod='scale')');
$('.thumb:' + place).css("-ms-filter", 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + entry.thumbnailURL + ',sizingMethod='scale')');

You get an Unexpected identifier because of these two bits:
',sizingMethod='scale')');
You must change it to
',sizingMethod=\'scale\')');
or
',sizingMethod="scale")');

Jquery not adding an background image to div

I have a function that is adding a background-image to my div. But its not showing.
this is my function
var totalCount = 6;
function changeBackground()
{
var num = Math.ceil( Math.random() * totalCount );
backgroundUrl = '/background/test2/'+num+'.jpg';
$('#background').css('background-image, url(' +backgroundUrl+ ')');
}
changeBackground();
The image changes everytime that the the page gets refreshed. I know that part is working because if i change
$('#background').css('background-image, url(' +backgroundUrl+ ')');
to
document.body.parentNode.style.backgroundImage = 'url(background/test2/'+num+'.jpg)';
it shows me the image like i wanted. But on the html tag. I want it on the div, so i can fade it in with jQuery.
here is my CSS
#background {
width:100% !important;
height:100% !important;
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
i don't get any error's in the console and when i look up the css nothing is added in the css. How can i now what is wrong? So in the future i can for myself what the problem is.

Change
$('#background').css('background-image, url(' +backgroundUrl+ ')');
To
$('#background').css('background-image', 'url(' +backgroundUrl+ ')');