Develop Reference

Javascript images cover the full page

I have below code that is a function for changing background-image every 10th second:
$(function() {
var body = $(".home");
var backgrounds = [
"url(img/Agure.jpg)",
"url(img/Arsenal1.jpg)",
"url(img/ManUtd.jpg)",
"url(img/stadion.jpg)",
];
var current = 0;
function nextBackground() {
body.css(
"background",
backgrounds[current = ++current % backgrounds.length]);
setTimeout(nextBackground, 10000);
}
setTimeout(nextBackground, 10000);
body.css("background", backgrounds[0]);
The code works but I want the images always to cover the full page. Some images are to small to cover the full page so they just stack up next to each other. Any suggestions how I can change the code?
HTML and CSS:
<section class="home">
<div class="centered">
<div class="h-100 row align-items-center">
</div>
</div>
</section>
.home {
width: 100%;
height: 100vh;
background-position: center top;
background-size: cover;
}

The issue here is a combination of two things:
You aren't using background-repeat: no-repeat which means the images will tile to cover the background (This is only visible when the image is smaller than the container, which can be confusing)
And you're setting background in JS, rather than background-image which would overwrite your extra CSS properties.
Here's a modified version:
$(function() {
var body = $(".home");
var backgrounds = [
"url(https://picsum.photos/200/300)",
"url(https://picsum.photos/100/300)",
"url(https://picsum.photos/300/300)",
"url(https://picsum.photos/250/300)",
];
var current = 0;
function nextBackground() {
body.css(
"background-image",
backgrounds[current = ++current % backgrounds.length]
);
setTimeout(nextBackground, 10000);
}
setTimeout(nextBackground, 10000);
body.css("background-image", backgrounds[0]);
})
.home {
width: 100%;
height: 100vh;
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="home">
<div class="centered">
<div class="h-100 row align-items-center">
</div>
</div>
</section>

When the image is small the browser automatically adds multiple image (stacked in your case)
Try adding the following in your css to avoid it
background-repeat: no-repeat;
Also instead of writing
body.css("background", backgrounds[0]);
write
body.css("background-image", backgrounds[0]);

changing html element background image js

i have searched google and on here but i cant exactly find a correct answer to my problem i used this code:
html {
background: url('../resources/imgs/bgs/mainbg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
that i got from the internet to set a background image that is always in the center and fits perfecly in the browser and it works great but i ran into a problem. i need to change the background image on a button click but i dont know how to target the html tag is it even possible? many thanks :)
my question was flagged as a duplicate but my problrm is not just getting the style of the html elememnt but changing it the same as the code snippet using only pure javascript

You have to set both backgroundImage and backgroundSize property. Try the following:
document.querySelector('#btnSetImage').addEventListener('click', function(){
var html = document.querySelector('html');
html.style.backgroundImage = "url('https://www.noodleman.co.uk/images/source/google_merchant_bulk_category_assign/google.jpg')";
html.style.backgroundSize = 'cover';
});
<button type="button" id="btnSetImage">Set Background Image</button>

Simply use:
document.getElementsByTagName('html')[0].style.backgroundImage = "url('img_tree.png')";

With jquery you could do the following
$('html').on('click', function(){
$('html').css({
"background": "url('https://picsum.photos/1200/3300/?blur') no-repeat center center fixed",
"background-size": "cover"
});
});

You can access the html element directly with documentElement:
/*Just change the image source with javascript*/
document.querySelector('#changeImage').addEventListener('click', function() {
document.documentElement.style.backgroundImage = 'url("https://www.fillmurray.com/400/400")';
});
/*Base settings in CSS*/
html {
background: url('https://www.fillmurray.com/g/400/400') no-repeat center center fixed;
/*This Would be a greyscale image*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<div style="color:#FFF;">Bill Murray!</div>
<!-- Just Some Content -->
<button id="changeImage">ChangeImage</button>

HTML, JQuery button on click to specific function

I have a piece of script that changes the background on click. But when I click anything even the screen, the background changes. I would like only the button to change
the background image. I just can't seem to code it properly in jquery. Any help is most appreciated. Thanks
<!DOCTYPE html>
<html>
<style>
body
{
background:url(Pic/jungle.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<body>
<button class="color" style="background-image: url('Pic/changebackground.png'); width:60px; height: 50px;background-repeat:no-repeat;background-color: transparent;border:none;"></button>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
var rotate = 0;
var colors = ["url('Pic/hi.jpg')", "url('Pic/jungle.jpg')"];
$('body').on("click", function () {
$(this).css({
'background-image': colors[rotate]
});
rotate++;
if (rotate >= 2) {
rotate = 0;
}
});
});
</script>

You want to tie the event to the button, then select the body and perform the css manipulation to that. You're code would look like this:
$('button').on("click", function () {
$('body').css({
'background-image': colors[rotate]
});
});

Unable to change background image on mouse scroll

I'm trying to change the background image of the body using the following tutorial.
http://www.javascriptkit.com/javatutors/onmousewheel.shtml
But the background image isn't changing.
Html Code -
<body id="img"></body>
CSS Code -
#img {
overflow: hidden;
background: url("././images/1.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Javascript code -
var myimages=[
"./images/2.jpg",
"./images/3.jpg",
"./images/4.jpg"
]
var slideshow=document.getElementById("img")
var nextslideindex=0
function rotateimage(e){
var evt=window.event || e //equalize event object
var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta
nextslideindex=(delta<=-120)? nextslideindex+1 : nextslideindex-1
nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex
slideshow.style.background=myimages[nextslideindex]
if (evt.preventDefault)
evt.preventDefault()
else
return false
}
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll""mousewheel"
if (slideshow.attachEvent)
slideshow.attachEvent("on"+mousewheelevt, rotateimage)
else if (slideshow.addEventListener) //WC3 browsers
slideshow.addEventListener(mousewheelevt, rotateimage, false)

You're trying to use getElementById before the DOM has loaded(before the body element has loaded).
Recommend you use jQuery to catch the event where the DOM has finished loading. Read more here:
http://learn.jquery.com/using-jquery-core/document-ready/

Cycling through backgrounds with jquery

I use progressive CSS to style my website background images. I have found a few tutorials on cycling through images with jQuery, but I have yet to see any that will do it through CSS. All of them are with HTML. How can I do this so that the Jquery or Javascript cycles through images without having to create a div to do so.
My CSS:
html {
background: url('../assets/homepage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

You sure can do it, but there won't be any transition when the image changes:
html, html.slide1 {
background: url('../assets/homepage1.jpg') no-repeat center center fixed;
/* add vendor prefixes */
background-size: cover;
}
html.slide2 {
background-image: url('../assets/homepage2.jpg');
}
html.slide3 {
background-image: url('../assets/homepage3.jpg');
}
$(function () {
var classList = ['slide1', 'slide2', 'slide3'],
$html = $('html'),
last = classList.length - 1,
current = 0;
setInterval(function () {
current = current == last ? 0 : current + 1;
$html.prop('class', classList[current]);
}, 1000);
});
Here's the fiddle: http://jsfiddle.net/rmR7V/

Try sliding the background image off-screen, changing it and sliding it back on.
<style>
html {
background: url('Image1.jpg') no-repeat center center fixed;
background-size: cover;
}
</style>
<script type="text/javascript">
$(document).ready( function() {
$('html').animate({
"background-position": -2048
},2000, function() {
$('html').css('background-image',"url('Image2.jpg')");
$('html').animate({
"background-position": 0
},2000);
});
});
</script>